Answer the question
In order to leave comments, you need to log in
What is wrong with nested array output?
<div id="app">
<div class="columns medium-3" v-for="result in results" :key="result.resultId">
<div class="card">
<div v-for="image in images" :key="image.imageId">
<input type="radio" v-model="profileImg" name="profileImg" :value="image.imgId"> Choose image
</div>
You have selected : {{profileImg}}
</div>
<div class="card-divider">
{{ result.title }}
</div>
<div class="card-section">
<ul>
<li>{{ result.sizes.join(' ') }}</li>
</ul>
</div>
</div>
</div>
const vm = new Vue({
el: '#app',
data: {
results: [{
images: [{
imgId: 1
}, {
imgId: 2
}, {
imgId: 3
}],
profileImg: 2,
title: "iPhone 11 Pro Max",
sizes: [
'68GB', '256GB', '512GB'
]
}, {
images: [{
imgId: 1
}, {
imgId: 2
}, {
imgId: 3
}],
profileImg: 2,
title: "iPhone 11 Pro",
sizes: [
'68GB', '256GB'
]
}, {
images: [{
imgId: 1
}, {
imgId: 2
}, {
imgId: 3
}],
profileImg: 2,
title: "iPhone 11",
sizes: [
'68GB', '512GB'
]
}, {
images: [{
imgId: 1
}, {
imgId: 2
}, {
imgId: 3
}],
profileImg: 2,
title: "iPhone XR",
sizes: [
'256GB', '512GB'
]
}]
}
});
Answer the question
In order to leave comments, you need to log in
v-for="image in images"
Should be
instead v-for="image in result.images"
.
Instead of v-model="profileImg"
and {{profileImg}}
there should be v-model="result.profileImg"
and {{ result.profileImg }}
.
For groups of radio buttons to work independently, instead of a static name="profileImg"
value, name should be calculated dynamically, depending on result (for example, add id, if any, or index). Should be
instead . <li>{{ result.sizes.join(' ') }}</li>
<li v-for="size in result.sizes">{{ size }}</li>
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question