如何使用 axios 在 Vue Js 中导入 json 数据

Question

我的 JSON 数据是这样的，之前保存在 vue 的 js 文件中并从那里访问它 我希望我的 html v-for: 条件能够正常工作，因为它之前工作正常 我尝试了 Vue js 文档中的方法，但它无法获取 json 数据并执行它，如果有人可以请帮助。

variants: [
            {
                variantId:501,
                variantImage: 'assets/images/demo_watch_1.png',
                variantname: 'alpha',
                typeslug: 'men',
                dialname: '26.5x28.5' ,


                items: [
                    {
                        itemId: 1,
                        itemimage: 'assets/images/demo_watch_2.png',
                        itemcolour: 'gold'
                    },
                     {
                        itemId: 2,
                        itemimage: 'assets/images/demo_watch_4.png',
                        itemcolour: 'pink',
                    },
                    {
                        itemId:3,
                        itemimage: 'assets/images/demo_watch_1.png',
                        itemcolour: 'black'
                    },

                ]

            },
              {
                variantId:502,
                variantImage: 'assets/images/demo_watch_2.png',
                variantname: 'alpha',
                  typeslug: 'women',
                   dialname: '35',
                    items: [
                    {
                        itemId: 1,
                        itemimage: 'assets/images/demo_watch_2.png',
                        itemcolour: 'gold'
                    },
                     {
                        itemId: 2,
                        itemimage: 'assets/images/demo_watch_4.png',
                        itemcolour: 'pink',
                    },
                    {
                        itemId:3,
                        itemimage: 'assets/images/demo_watch_1.png',
                        itemcolour: 'black'
                    },

                ]
            } ],

我的Vue代码是这样的

var watchslider = new Vue({

    el: '#Products',

   data() {
    return {
          Variants: []
    }
  },
     mounted() {
     axios
      .get('./products.json')
      .then(response => {
          this.Variants = response.data

                        }) 
           .catch((e) => {
      console.error(e)
    })
           } 

});

但我无法从 json 中获取数据并在我的 html 中执行它

    <div id="Products" class="responsive py-5">

     <div v-for="(variant,variantIndex) in variants"  :key="variant.variantId" class="col-lg-4 col-4 p-5">

    <p>{{variant.variantImage}}</p>

    </div>
</div>

Answer 1

您的数据绑定标记中缺少分隔符 {{ }}。

你需要改变这一行，

<p>{{ variant.variantImage }}</p>

Answer 2

这是因为 3 个原因。

1) 你的 json 无效

试试这个

    {
    "variants": [
      {
        "variantId": 501,
        "variantImage": "assets/images/demo_watch_1.png",
        "variantname": "alpha",
        "typeslug": "men",
        "dialname": "26.5x28.5",
        "items": [
          {
            "itemId": 1,
            "itemimage": "assets/images/demo_watch_2.png",
            "itemcolour": "gold"
          },
          {
            "itemId": 2,
            "itemimage": "assets/images/demo_watch_4.png",
            "itemcolour": "pink"
          },
          {
            "itemId": 3,
            "itemimage": "assets/images/demo_watch_1.png",
            "itemcolour": "black"
          }
        ]
      },
      {
        "variantId": 502,
        "variantImage": "assets/images/demo_watch_2.png",
        "variantname": "alpha",
        "typeslug": "women",
        "dialname": "35",
        "items": [
          {
            "itemId": 1,
            "itemimage": "assets/images/demo_watch_2.png",
            "itemcolour": "gold"
          },
          {
            "itemId": 2,
            "itemimage": "assets/images/demo_watch_4.png",
            "itemcolour": "pink"
          },
          {
            "itemId": 3,
            "itemimage": "assets/images/demo_watch_1.png",
            "itemcolour": "black"
          }
        ]
      }
    ]
  }

2) 您在 HTML 和 javascript 文件中使用不同的变量，两者应该相同

 <div v-for="(variant,variantIndex) in Variants" :key="variant.variantId" class="col-lg-4 col-4 p-5">
            <p>{{variant.variantImage}}</p>
        </div>



new Vue({

    el: '#Products',

    data() {
        return {
            Variants: []
        }
    },
    mounted() {
        axios
            .get('./products.json')
            .then(response => {
                this.Variants = response.data.variants

            })
            .catch((e) => {
                console.error(e)
            })
    }

});

3) 你不需要将 vue 实例放入变量watchslider