M
M
msdoc112020-08-20 14:39:23
Vue.js
msdoc11, 2020-08-20 14:39:23

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

1 answer(s)
0
0xD34F, 2020-08-20
@msdoc11

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 question

Ask a Question

731 491 924 answers to any question