如何使用v-for在html文件的一个标签中访问vue js的多个数据元素？

Question

This is a part of my Vue project where I want to get some data elements in a table. I want to take data2 element like countryData in another column of the table. How can I do this? You can run the snippet for further reference.

In HTML code I have included the vue js library and simply made a table.

 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

You can either combine the data as you wish, before displaying in template, for example:

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] });
  });
}

Then you can access in template with:

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

or you can utilize the index in the template:

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