search

Home  >  Q&A  >  body text

How to access data in different v-for loops in Vue

I have a table body in my Vue application in which I build a portion of the rows by looping through a data object. I then have a separate section that uses a different data object, however, I need to compare its value to the value in another loop for conditional styling.

I would like to know if there is a way to send the value part of the data into a method call during the first for loop so that I can access it in the summary loop, if so the words said.

This is the form:

<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粉511757848P粉511757848268 days ago482

reply all(1)I'll reply

  • P粉642436282

    P粉6424362822024-04-01 12:40:10

    You can use the calculation method to create a lookup table between activeStore and managerNumbers and loop through it.

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

    Now you can use this array to loop through your v-for:

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

    Now, both obj.value.qty and obj.store.qty can be used in the same loop.

    reply
    0
  • Cancelreply