如何使用“v-if”实现“v-for”？

Question

我有两张桌子，一张是书籍，另一张是库存，我正在尝试按名称获取书籍并将其显示在库存表中我尝试了以下代码，但它显示了这个错误。[vue/no-use-v-if-with-v-for] 'v-for' 指令中的 'Books' 变量应该替换为返回过滤数组的计算属性。您不应将“v-for”与“v-if”混用。<tr role="row" class="even" v-for="Stock in Stocks.data" v-bind:key="Stock.id"> <td v-for="Book in Books"     :value="Book.id"     :key="Book.id"     v-if="Stock.book_id === Book.id">     {{Book.name}} </td> </tr>我不知道如何创建一个返回过滤数组或对象的计算属性，任何帮助将不胜感激。

Answer 1

我会使用一个计算属性，该属性创建一个对象，其中 Books 按 Stock ID 分组

computed: {

  stocksWithBooks () {

    return this.Stocks.data.map(stock => ({

      ...stock,

      books: this.Books.filter(({ id }) => id === stock.book_id)

    })

  }

}

现在您可以在模板中使用它

<tr role="row" class="even" v-for="Stock in stocksWithBooks" v-bind:key="Stock.id">

  <td v-for="Book in Stock.books" :key="Book.id">

    {{Book.name}}

  </td>

</tr>

为确保您不会因数据分配时间而出错，您应该确保定义一些合理的初始值，例如

data() {

  return {

    // ...

    Books: [], // not {}

    // ...

    Stocks: { data: [] }, // define an empty "data" array

    // ...

  }

}

Answer 2

不要在同一个元素中使用v-ifand ，你可以使用.v-fortemplate

<tr role="row" class="even" v-for="Stock in Stocks.data" v-bind:key="Stock.id">

     <td v-for="Book in Books" :value="Book.id" :key="Book.id">

         <template v-if="Stock.book_id === Book.id">

            {{Book.name}}

         </template> 

     </td>

 </tr>