在VUE中显示多个json

Question

这是我的代码

<script>
export default {
  name: "app",
  data() {
    return {
      items: []
    };
  },

  created: function() {
    this.makeAjaxCall("books.json", "get").then(res => {
        this.items = res
        return res
    }),

   this.makeAjaxCall("authors.json", "get").then(resA => {
        this.items = resA
        return resA
    })
  },

  methods: {

    makeAjaxCall:function(url, methodType){
      var promiseObj = new Promise(function(resolve, reject){
          var xhr = new XMLHttpRequest();
          xhr.open(methodType, url, true);
          xhr.send();
          xhr.onreadystatechange = function(){
          if (xhr.readyState === 4){
            if (xhr.status === 200){
                //alert("xhr done ok");
                var response = xhr.responseText;
                var respJson = JSON.parse(response);
                resolve(respJson);
            } else {
                reject(xhr.status);
               //alert("xhr failed");
            }
          } else {
            //alert("xhr processing");
          }
      }
      //alert("request sent succesfully");
    });
    return promiseObj;
    }

  }
};
</script>

<template>
  <div id="app">
    <table class="booksTable">
      <thead>
        <tr>
          <th>Title</th>
          <th>Author</th>
          <th>Genre</th>
          <th>Image</th>
          <th>Availability</th>
          <th>Options</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in items.books" :key="item.name">
              <td>{{item.name}}</td>
              <td>{{item.author}}</td>
              <td>{{item.genre}}</td>
              <td><img id="imageBook" :src="item.imageUrl"></td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

我有makeAjaxCall函数，它为我带来books.json，但我想将其用于多个json。 我试图用另一个json authors.json在created下调用它，但是它不起作用。 我猜语法是错误的。 我知道可以更好地创建该函数，但是我想保留其初始形式或添加一个参数作为json文件（尝试过，但对我不起作用） 有任何想法，好吗？

Answer 1

要绑定数据，必须先声明items: {books:[],authors:[]}

您也要覆盖this.items，请使用this.items.books和this.items.authors进行分配。

下面是没有ajax的示例

new Vue ({
  el: "#app",
  data() {
    return {
      items: {books:[],authors:[]}
    };
  },

  created: function() {
    this.items.books = this.makeAjaxCall("books", "get");
    this.items.authors = this.makeAjaxCall("authors", "get");
  },

  methods: {
    makeAjaxCall:function(url, methodType){
      if(url == 'books'){
        promiseObj= [{name:'name11',author:'author11',genre:'genre11'},{name:'name12',author:'author12',genre:'genre12'}]
      }else{
        promiseObj= [{name:'name22',author:'author22',genre:'genre22'}]
      }
      return promiseObj;
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.21/vue.js"></script>

  <div id="app">
    <table class="booksTable">
      <thead>
        <tr>
          <th>Title</th>
          <th>Author</th>
          <th>Genre</th>
          <th>Image</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in items.books" :key="item.name">
              <td>{{item.name}}</td>
              <td>{{item.author}}</td>
              <td>{{item.genre}}</td>
              <td><img :src="item.imageUrl"></td>
        </tr>
      </tbody>
    </table>
    <table class="authorsTable">
      <thead>
        <tr>
          <th>Title</th>
          <th>Author</th>
          <th>Genre</th>
          <th>Image</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in items.authors" :key="item.name">
              <td>{{item.name}}</td>
              <td>{{item.author}}</td>
              <td>{{item.genre}}</td>
              <td><img :src="item.imageUrl"></td>
        </tr>
      </tbody>
    </table>
  </div>

Answer 2

因此，经过数百万次尝试，我找到了答案，这很简单。

<script>
import './styling.scss'
export default {
  name: "app",
  data() {
    return {
      items: {books:[], authors:[]}
    };
  },

  created: function() {
    this.makeAjaxCall("books.json", "get").then(res => {
        this.items.books = res.books;
        return res;
    }),

    this.makeAjaxCall("authors.json", "get").then(res => {
        this.items.authors = res.authors;
        return res;
    })
  },

  methods: {

    makeAjaxCall:function(url, methodType){
      var promiseObj = new Promise(function(resolve, reject){
          var xhr = new XMLHttpRequest();
          xhr.open(methodType, url, true);
          xhr.send();
          xhr.onreadystatechange = function(){
          if (xhr.readyState === 4){
            if (xhr.status === 200){
                //alert("xhr done ok");
                var response = xhr.responseText;
                var respJson = JSON.parse(response);
                resolve(respJson);
            } else {
                reject(xhr.status);
               //alert("xhr failed");
            }
          } else {
            //alert("xhr processing");
          }
      }
      //alert("request sent succesfully");
    });
    return promiseObj;
    }

  }
};
</script>

<template>
  <div id="app">
    <table class="booksTable">
      <thead>
        <tr>
          <th>Title</th>
          <th>Author</th>
          <th>Genre</th>
          <th>Image</th>
          <th>Availability</th>
          <th>Options</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in items.books" :key="item.name">
              <td>{{item.name}}</td>
              <td>{{item.author}}</td>
              <td>{{item.genre}}</td>
              <td><img id="imageBook" :src="item.imageUrl"></td>
              <td>
                <button class="btn add"> Add</button>
                <button class="btn edit"> Edit</button>
                <button class="btn delete"> Delete</button>
              </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>