VueJS - how build dynamic values, using the mustaches? - arrays

Question

In data, I have 2 arrays.
In the template, I want to use value of a special key of an array, to target the second array.
<template>
<table>
<tr v-for="sa in mySecondArray">
<td v-for="fa in myFirstArray">
{{ ??? }}
</td>
</tr>
</table>
</template>
// ...
data() {
myFirstArray: [
{
a: "KeyOne",
b: "we don't care",
c: "we don't care",
},
{
a: "KeyTwo",
b: "we don't care",
c: "we don't care",
},
],
mySecondArray: [
{
KeyOne: "foo",
KeyTwo: "bar"
},
{
KeyOne: "hello",
KeyTwo: "world"
},
],
In this exemple, I want to display
<table>
<tr>
<td>foo</td>
<td>hello</td>
</tr>
<tr>
<td>bar</td>
<td>world</td>
</tr>
</table>
I tried :
<tr v-for="sa in mySecondArray">
<td v-for="fa in myFirstArray">
{{ sa + fa.a }}
</td>
</tr>
in this case it displays [object Object].
I tried :
<tr v-for="sa in mySecondArray">
<td v-for="fa in myFirstArray">
{{ sa.concat('.',fa.a) }}
</td>
</tr>
in this case console says: "sa.concat is not a function".
I also tried with quotes, but it just concats the strings: "sa.KeyOne".
How to make this final string used as a target and not just a string ?

Answer 1

You can do something like this to get your result,
new Vue({
el: '#app',
data: {
firstArray: [{
a: "KeyOne",
b: "we don't care",
c: "we don't care",
},
{
a: "KeyTwo",
b: "we don't care",
c: "we don't care",
}],
secondArray: [
{
KeyOne: "foo",
KeyTwo: "bar"
},
{
KeyOne: "hello",
KeyTwo: "world"
},
]
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/css/bootstrap.min.css" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<div id="app">
<table class="table">
<tr>
<th>head1</th>
<th>head2</th>
</tr>
<tr v-for="(sa1, index1) in secondArray" >
<td v-for="(sa2, index2) in secondArray">
{{secondArray[index2][firstArray[index1].a]}}
</td>
</tr>
</table>
</div>
Hope this solves your problem!