亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何使用“v-if”實現“v-for”?

如何使用“v-if”實現“v-for”?

幕布斯6054654 2022-05-22 11:18:33
我有兩張桌子,一張是書籍,另一張是庫存,我正在嘗試按名稱獲取書籍并將其顯示在庫存表中我嘗試了以下代碼,但它顯示了這個錯誤。[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>我不知道如何創建一個返回過濾數組或對象的計算屬性,任何幫助將不勝感激。
查看完整描述

2 回答

?
藍山帝景

TA貢獻1843條經驗 獲得超7個贊

我會使用一個計算屬性,該屬性創建一個對象,其中 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

    // ...

  }

}


查看完整回答
反對 回復 2022-05-22
?
斯蒂芬大帝

TA貢獻1827條經驗 獲得超8個贊

不要在同一個元素中使用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>


查看完整回答
反對 回復 2022-05-22
  • 2 回答
  • 0 關注
  • 133 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號