So greifen Sie in Vue auf Daten in verschiedenen V-for-Schleifen zu

Question

Ich habe einen Tabellenkörper in meiner Vue-App, in dem ich einen Teil der Zeilen aufbaue, indem ich ein Datenobjekt durchlaufe. Ich habe dann einen separaten Abschnitt, der ein anderes Datenobjekt verwendet, dessen Wert ich jedoch für die bedingte Gestaltung mit dem Wert in einer anderen Schleife vergleichen muss.

Ich habe mich gefragt, ob es eine Möglichkeit gibt, den value-Teil der Daten während der ersten for-Schleife an einen Methodenaufruf zu senden, damit ich in der Aggregationsschleife darauf zugreifen kann, falls das der Fall ist.

Das ist das Formular:

<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

您可以使用计算方法来创建activeStore和managerNumbers之间的查找表，并循环遍历。

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

现在，您可以使用这个数组来循环遍历您的v-for：

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

现在，obj.value.qty和obj.store.qty都可以在同一个循环中使用。