如何使用v-for在html文件的一個標簽中訪問vue js的多個數據元素？

Question

這是我的 Vue 項目的一部分，我想在表格中獲取一些數據元素。 我想在表格的另一列中使用類似 countryData 的data2元素。 我怎樣才能做到這一點？ 您可以運行該代碼段以供進一步參考。

在 HTML 代碼中，我包含了 vue js 庫並簡單地制作了一個表格。

 var app = new Vue({ el: "#app", data(){ return { countryData:[{name:"india", "1999":9537, "2000":10874}, {name:"china", "1999":7537, "2000":8874}, {name:"england", "1999":11537, "2000":12074} ], data2: [ {ser1: 1, ser2: 7}, {ser1: 4, ser2: 1}, {ser1: 6, ser2: 8} ]} } })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <div> <h3>Data Table</h3> </div> <table> <thead> <tr> <th>Country</th> <th>Sales</th> </tr> </thead> <tbody> <tr v-for="x in countryData"> <td>{{x.name}}</td> <! -- I want to take data2 element in another column of my table --> </tr> </tbody> </table> </div>

Answer 1

在模板中顯示之前，您可以根據需要組合數據，例如：

countryData: [
  { name: "india", "1999": 9537, "2000": 10874 },
  { name: "china", "1999": 7537, "2000": 8874 },
  { name: "england", "1999": 11537, "2000": 12074 }
],
data2: [{ ser1: 1, ser2: 7 }, { ser1: 4, ser2: 1 }, { ser1: 6, ser2: 8 }],
combinedData: []

// ...

created() {
  this.countryData.forEach((x, i) => {
    this.combinedData.push({ ...x, ...this.data2[i] });
  });
}

然后你可以在模板中訪問：

<tr v-for="(x, i) in combinedData" :key="i">
  <td>{{x.name}}</td>
  <td>{{x.ser1}}</td>
  <td>{{x.ser2}}</td>
</tr>

或者您可以使用模板中的索引：

<tr v-for="(x, i) in countryData" :key="i">
  <td>{{x.name}}</td>
  <td>{{data2[i].ser1}}</td>
  <td>{{data2[i].ser2}}</td>
</tr>