Question

我正在使用vue来制作一些html组件的原型。有没有办法让vue识别两个json文件？

vue.js

var vm = new Vue({
  el: '#douglas-laing',
   data: {
    products: [],
    contentPanels: []
},

created() {
axios
  .get( `products.json`, `contentPanel.json`)
  .then(response => {
    // JSON responses are automatically parsed.
    this.products = response.data;
    this.contentPanels = response.data;
  })
},

computed: {


}, // end computed

  methods: { }

});

在HTML中

<template v-for="contentPanel in contentPanels">
    {{ contentPanel.description }}
</template>

在json文件中

  [
      {
        "description": "this is a content panel test",
      }
  ]

Answer 1

您可以使用axios.all（）完成此操作，例如：

methods: {
    getProducts() {
        return axios.get('/products.json');
    },
    getContentPanel() {
        return axios.get('/contentPanel.json');
    }
},
created(){
    axios.all([this.getProducts(), this.getContentPanel()])
    .then(axios.spread(function (products, contentPanel) {
        // Do something with the values
    }));
}

Answer 2

明白了

created（）{ 轴距 .get（products.json） .then（response => { // JSON响应会自动解析。 this.products = response.data; }）轴距 .get（contentPanel.json） .then（response => { // JSON响应会自动解析。 this.contentPanels = response.data; }） }

有没有一种方法可以使用vue和axios获取和引用两个或多个本地json文件

2 个答案: