Vue中怎样获取json文件中的数据

你的名字 2023-10-18 12:24 74阅读 0赞

## 场景 ##

访问百度音乐API需要传递音乐类型参数，而这些参数是存在musictype.json中，

现在在组件listcate.vue需要获取json数据。

json文件内容：![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70][]

文件位置：

![Image 1][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 1][]

## 实现 ##

### musictype.json ###

{
      "currentType":[1,2,11,21,22,23,24,25]
    }

### listcate.vue ###

<template lang="html">
      <div>
        <ListCate_List v-for="item in musicTypeJSON" :musicType="item" />
      </div>
    </template>
    
    <script>
    
    import MusicType from "../assets/data/musictype.json"
    import ListCate_List from "../components/ListCate_List"
    
    export default {
      data(){
       return{
         musicTypeJSON:[]
       }
      },
      components:{
        ListCate_List
      },
      created(){
        this.musicTypeJSON = MusicType.currentType
      }
    }
    </script>
    
    <style lang="css">
    </style>

注：

是通过import MusicType from "../assets/data/musictype.json" 引入的

然后通过 this.musicTypeJSON = MusicType.currentType 赋值给musicTypeJSON，然后通过

<ListCate\_List v-for="item in musicTypeJSON" :musicType="item" />

循环遍历取值。

然后再ListCast\_List.vue中直接通过：

props:{
        musicType:{
          type:[String,Number],
          default:1
        }
      },
      mounted(){
        const ListCateUrl = this.HOST + "/v1/restserver/ting?method=baidu.ting.billboard.billList&type="+ this.musicType +"&size=3&offset=0"
        this.$axios.get(ListCateUrl)
          .then(res => {
          console.log(res.data)
            this.listCateData = res.data
          })
          .catch(error => {
            console.log(error);
          })
      }
    }

获取并使用。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2018121021235746.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70
[Image 1]: 
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20181210212405671.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70