How to access multiple data elements of vue js in one tag of html file using v-for?

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>

You could do another v-for: <td v-for="element in data2">{{ element.ser1 }}</td>. Then you'd have a column corresponding to each data2's element in each row. Not sure if that you are trying to achieve though. — António Quadrado
– António Quadrado, Commented Jun 4, 2020 at 16:40
Please could you add a sample of the output that you wish, I'm not exactly clear on what you want. — AVJT82
– AVJT82, Commented Jun 4, 2020 at 16:54
codepen.io/alassetter/pen/cyrfB here you can see the sample output. In the place of month row I want countryData and in the the place of sale I want data2 elements — Lakshay Khandelwal
– Lakshay Khandelwal, Commented Jun 4, 2020 at 16:59
still don't understand. So do you want first row to be: india - 1 - 7 ? — AVJT82
– AVJT82, Commented Jun 4, 2020 at 17:18
sorry I mean the column ..............I want Country as head of first column and then country names from countryData as the elements of first column . And in the second column I want the data2.ser1 elements — Lakshay Khandelwal
– Lakshay Khandelwal, Commented Jun 4, 2020 at 17:24

AVJT82 · Accepted Answer · 2020-06-04 17:48:27Z

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>

answered Jun 4, 2020 at 17:48

AVJT82

73.6k25 gold badges146 silver badges170 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to access multiple data elements of vue js in one tag of html file using v-for?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related