Как написать функцию с данными из разных jsons?

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>

Я хочу написать функцию, которая получает в качестве параметра идентификатор для автора (из books.json) и возвращает имя автора (от авторов).json) Я не знаю, как написать функцию или как / где ее использовать.Я работаю в Vue, так что все немного неясно.Может кто-нибудь помочь, пожалуйста?

Answer 1

Я бы использовал вместо этого вычисляемое свойство .Поэтому делайте вызовы как есть и удалите функцию 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.