如何在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 }}