Bagaimana untuk mengakses data dalam gelung v-for yang berbeza dalam Vue
P粉511757848
P粉511757848 2024-03-31 14:54:54
0
1
466

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>

P粉511757848
P粉511757848

membalas semua(1)
P粉642436282

Anda boleh menggunakan kaedah pengiraan untuk mencipta jadual carian antara activeStoremanagerNumbers 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.qtyobj.store.qty semua boleh digunakan dalam gelung yang sama.

Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan