Comment accéder aux données dans différentes boucles v-for dans Vue

Question

J'ai un corps de table dans mon application Vue dans lequel je crée une partie des lignes en parcourant un objet de données. J'ai ensuite une section distincte qui utilise un objet de données différent. Cependant, je dois comparer sa valeur à la valeur d'une autre boucle pour un style conditionnel.

Je me demandais s'il y avait un moyen d'envoyer la partie value des données dans un appel de méthode lors de la première boucle for afin que je puisse y accéder dans la boucle d'agrégation, si c'est le cas.

Voici le formulaire :

<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

Vous pouvez utiliser des méthodes de calcul pour créer une table de recherche entre activeStore和managerNumbers et la parcourir en boucle.

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

Vous pouvez maintenant utiliser ce tableau pour parcourir votre v-for :

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

Maintenant, obj.value.qty和obj.store.qty peuvent tous être utilisés dans la même boucle.