Bagaimana untuk mengakses data dalam gelung v-for yang berbeza dalam Vue

Question

Saya mempunyai badan jadual dalam apl Vue saya di mana saya membina sebahagian daripada baris dengan menggelung melalui objek data. Saya kemudiannya mempunyai bahagian berasingan yang menggunakan objek data yang berbeza, namun, saya perlu membandingkan nilainya dengan nilai dalam gelung lain untuk penggayaan bersyarat.

Saya tertanya-tanya sama ada terdapat cara untuk menghantar value bahagian data ke dalam panggilan kaedah semasa gelung untuk pertama supaya saya boleh mengaksesnya dalam gelung pengagregatan, jika itu yang berlaku.

Ini borangnya:

<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>

Answer 1

Anda boleh menggunakan kaedah pengiraan untuk mencipta jadual carian antara activeStore和managerNumbers dan gelung melaluinya.

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

Kini anda boleh menggunakan tatasusunan ini untuk mengulangi v-for:

anda

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

Kini, obj.value.qty和obj.store.qty semua boleh digunakan dalam gelung yang sama.