如何使用来自不同 json 的数据编写函数？

Question

我有这个代码。

<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;
    },

    returnAuthorName:function(authorId){
      for(i in items.books)
      _.find(items.authors, { 'id': items.books.authors });
      return items.authors.name
    }
  }
};
</script>

<template>
  <div id="app">
    {{items.authors}}
    <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>{{items.authors.name}}</td>
              <td>{{item.genre}}</td>
              <td><img id="imageBook" :src="item.imageUrl"></td>
              <td v-if="item.availability">Available</td>
              <td v-else>Unavailable</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>

我想编写一个函数，它接收作者的 id 作为参数（来自 books.json），并返回作者的姓名（来自 authors.json） 我不知道如何编写函数或如何/在哪里使用它。 我在vue中工作，所以它让一切都变得有点不清楚。 有人可以帮忙吗？

Answer 1

我会在这里使用computed property。因此，请按原样进行调用并删除 returnAuthorName 函数。

这些工作的方式，是随着items的更新，这个方法将被调用并返回一些东西。

computed: {
  booksWithAuthor () {
    const { books, authors } = this.items

    // If we don't have both of these don't do anything...
    if (books.length === 0 || authors.length === 0) {
      return []
    }

    return books.map(book => ({
      ...book,
      author: authors.find(author => author.id === book.authorId),
    }))
  },
}

然后在您的模板中您将拥有：book.author.name，只需循环通过 booksWithAuthor 而不是 items.books。