Question

我正在构建一个基于Django的JSON REST API的vue.js前端（使用DREST - 动态静态视图和DRF - Django Rest框架）。

在vue前端，我有一个项目列表，它使用v-for使用单项组件迭代数组。基本上是：

<ul>
  <book v-for="book in books" 
     :book="book" 
     :author="authors*[book.author]">
   </book>
</ul>

星号表示目前明显不正确的位。这个想法是组件接收两个道具，即正在显示的主要对象（书）和来自相关模型（作者）的次要引用对象。

父组件的数据包含一系列书籍和API“侧载”的作者数组，仅提供书籍页面中引用的作者。在book对象中，作者由其ID引用。另一种方法是让序列化程序在每个JSON书籍对象中嵌套相关的作者数据。但这样效率会降低，因为有些页面只会包含一个或几个作者，所以会有不必要的重复。

vue.js是否有办法从作者数组中获取正确的作者对象（使用该书的作者字段包含的作者UID），并将其传递给单项（书）组件？

或者应该在普通的javascript中完成（如果是这样的话）？

谢谢..！

Answer 1

您仍然可以使用方法：

export default {
    data () {
        return {
            authors: []
        }
    },
    methods: {
        findAuthor (id) {
            return this.authors.find(x => x.id === id)
        }
    }
}

<ul>
  <book v-for="book in books" 
     :book="book" 
     :author="findAuthor(book.author)">
   </book>
</ul>

将相关模型传递给vue 2.0组件

1 个答案: