如何在Vue中存取不同v-for循環中的數據
P粉511757848
P粉511757848 2024-03-31 14:54:54
0
1
468

我在我的Vue應用程式中有一個表格主體,在其中我透過循環一個資料物件來建立一部分行。然後,我有一個單獨的部分使用不同的資料對象,但是,我需要將其值與另一個循環中的值進行比較,以便進行條件樣式設定。

我想知道是否有一種方法,在第一個for循環的時候將value部分的資料傳送到一個方法呼叫中,這樣我就可以在匯總循環中存取它,如果這樣說的話。

這是表格:

<tbody v-if="selected === 'Stores'">
  <tr v-for="(value, manager) in managerNumbers" :key="manager"> <!--这是我想知道是否可以将value发送到方法调用的地方-->
    <td v-for="date in dates" :key="date" >
      <div v-for="(dataForDate, dateVal) in value.dates" :key="dateVal">
        <div v-if="dateVal == date ">
          @{{dataForDate.total_categories}}
        </div>
      </div>
    </td>
  </tr>

  <tr><td colspan="10"></td></tr>
  <tr><td colspan="10"></td></tr>
  <tr>
    <th>
      汇总
    </th>
    <div v-for="store in activeStore" :key="store">
      <th :style="'background: ' + (value.qty > store.qty ? '#000' : '#fff')">@{{ store.stock_num }}</th>
    </div>
  </tr>
</tbody>

P粉511757848
P粉511757848

全部回覆(1)
P粉642436282

您可以使用計算方法來建立activeStoremanagerNumbers之間的查找表,並循環遍歷。

get activeStoreAndManagerNumbers () {
 return managerNumbers.map((value, index) => {
    return {
      value, 
      store: activeStore[index] 
    }
  })
}

現在,您可以使用這個陣列來循環遍歷您的v-for

v-for="(obj, index) in activeStoreAndManagerNumbers"

#現在,obj.value.qtyobj.store.qty都可以在同一個迴圈中使用。

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板