如何在 fastapi 上查看来自 json 的产品

Question

我正在尝试做一个数字商店。我已经在 Fastapi 上获得了产品，现在我必须将它们呈现到网页上。我不知道该怎么做。我尝试使用 VueJS 导入它们，如下所示：

import productlist from ('127.0.0.1:8000/products')
        var prod = new Vue({
            $el: '#app',
            data: {
                loading: true,
                errored: false
            },
            mounted() {
                axios
                    .get('127.0.0.1:8000/products')
                    .then (response => (this.$el.info = response))
                    .catch (error => console.log(error))
                },
            methods: {
                reply_click(e) {
                    var id = event.target.getAttribute('data-id');
                    alert(id);
                }
            }
        });

但它们没有出现在应有的 div 上，这样做是这样的：

<div id="app">
            <div class="row">
                <div v-for="prod in productlist" data-id="prod.id" :key="prod.id" class="col-3 producte" data-toggle="modal" data-target="#modal1" on-click="reply_click($event)">
                    <template>
                        <div class="producte">
                            <div class="imgdesc">
                                <img :src="prod.urlimg" class="img-fluid"><br>
                                {{ product.desc }}
                            </div>
                            <img v-if="prod.cartell === 'new'" src="imgs/sign_new_offer.png" class="cartell">
                            <img v-if="prod.cartell === 'offer'" src="imgs/sign_offer.png" class="cartell">
                        </div>
                    </template>
                </div>
            </div>
        </div>

这是我拥有的 JSON。我将它发布在 fastapi 上，我必须从那里获取它，而不是从我发布的文件中获取。

{
        "id": 1,
        "desc": "Kaweco sport capeless roller pen and pencil set in pouch white",
        "urlimg": "imgs/offer1.png",
        "preu": 22,
        "oferta": "no"
    },

    {
        "id": 2,
        "desc": "Hacoa masking tape holder",
        "urlimg": "imgs/offer2.png",
        "preu": 24,
        "oferta": "new"
    },
    {
        "id": 3,
        "desc": "Hacoa black walnut business card holder",
        "urlimg": "imgs/offer3.png",
        "preu": 30,
        "oferta": "new"
    },
    {
        "id": 4,
        "desc": "Postalco legal envelope navy",
        "urlimg": "imgs/offer4.png",
        "preu": 15,
        "oferta": "offer"
    }

好的，这是一个带有json上第一个对象数据的模板。价格（“preu”）不在其中，因为它进入了一个在单击图像时打开的模式。

<div id="app">
            <div class="row">
                <div data-id="1" :key="1" class="col-3 producte" data-toggle="modal" data-target="#modal1" on-click="reply_click($event)">
                    <template>
                        <div class="producte">
                            <div class="imgdesc">
                                <img :src="imgs/offer1.png" class="img-fluid"><br>
                                Kaweco sport capeless roller pen and pencil set in pouch white
                            </div>
                            <!-- in the first one there's no offer, so the "cartell" wouldn't be showing. -->
                        </div>
                    </template>
                </div>
            </div>
        </div>

我也尝试了一个 Jinja 模板，但我不太了解它是如何工作的。任何形式的帮助都将受到热烈欢迎。谢谢。

Answer 1

请检查：

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
  <div class="row">
    <div v-for="prod in product" :data-id="prod.id" :key="prod.id" class="col-3 producte" data-toggle="modal" data-target="#modal1" on-click="reply_click($event)">
      <template>
        <div class="producte">
          <div class="imgdesc">
            <img :src="prod.urlimg" class="img-fluid"><br>
              {{ prod.desc }}
           </div>
           <img v-if="prod.oferta == 'new'" :src="prod.urlimg" class="cartell">
           <img v-if="prod.oferta == 'offer'" :src="prod.urlimg" class="cartell">
         </div>
       </template>
     </div>
  </div>
</div>
            
<script>
var app = new Vue({
  el: '#app',
  data: {
    product: [{
        "id": 1,
        "desc": "Kaweco sport capeless roller pen and pencil set in pouch white",
        "urlimg": "imgs/offer1.png",
        "preu": 22,
        "oferta": "no"
    },

    {
        "id": 2,
        "desc": "Hacoa masking tape holder",
        "urlimg": "imgs/offer2.png",
        "preu": 24,
        "oferta": "new"
    },
    {
        "id": 3,
        "desc": "Hacoa black walnut business card holder",
        "urlimg": "imgs/offer3.png",
        "preu": 30,
        "oferta": "new"
    },
    {
        "id": 4,
        "desc": "Postalco legal envelope navy",
        "urlimg": "imgs/offer4.png",
        "preu": 15,
        "oferta": "offer"
    }]
  }
});
</script>

它应该非常适合您！我们必须使用 : 来使用 vue 数据作为元素中的属性，而在正常使用/作为文本时，我们只能使用 {{ data }}。