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

Posted 2023-02-22

【中文标题】如何使用 axios 在 Vue Js 中导入 json 数据

【英文标题】：How Can I import json data in Vue Js with axios

【发布时间】：2020-04-21 16:54:14

【问题描述】：

我的 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>

【问题讨论】：

你将响应数据存储在posts，不应该是variants吗？

@pai.not.pi 我更新了问题，它也不适用于变体

我正在通过像这样@pai.not.pi 的 json 数据获取

【参考方案1】：

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

你需要改变这一行，

<p> variant.variantImage </p>

【讨论】：

我只尝试使用分隔符，忘记添加堆栈问题我更新了它，但仍然无法工作

有什么问题？你有什么错误吗？当前输出是多少？

在控制台中显示错误 ReferenceError: variables is not defined at wn.eval (eval at Ya (vue.min.js:6), :3:88) at wn.e. _render (vue.min.js:6) at wn.r (vue.min.js:6) at fn.get (vue.min.js:6) at new fn (vue.min.js:6) at vue .min.js:6 at wn.$mount (vue.min.js:6) at wn.$mount (vue.min.js:6) at wn.t._init (vue.min.js:6) at新 wn (vue.min.js:6)

大小写不匹配。您的代码的某些部分有Variants，大写V，其他一些地方是variants，小写v

我在我的 vue js 中将变量更改为变量，它在 variants 中执行了 json 数据，但现在它正在根据它拥有的数据运行循环，但我无法获取详细信息，例如:v-for variant in variables in this under this 它没有执行任何类似 variant.variantname @pai.not.pi 谢谢

【参考方案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

【讨论】：

我在我的 vue js 中将变量更改为变量，它在 variants 中执行了 json 数据，但现在它正在根据它拥有的数据运行循环，但我无法获取详细信息，例如:v-for variant in variables in this under this 它没有执行任何类似 variant.variantname @MA Rahman