v-for 循环。我将在每个复选框中获得相同的值

Question

我将展示用户最喜欢的音乐流派的循环。但我想从我的 Vue 实例中的属性读取它们。这是我的代码：

<div id="app">
    <form method="post" action="">
        <fieldset>
            <legend>Genres</legend>
            <!-- Item in Collection -->
            <div v-for="genre in genres">
                <input type="checkbox" v-model="selectedGenres" value="genre"> {{genre}}
            </div>
        </fieldset>
        <input type="submit" value="submit">
    </form>
</div>

<script>
    var vm = new Vue({
       el: '#app',
       data: {
           genres: ['jazz', 'pop', 'blues', 'classic', 'country'],
           selectedInterests: []
       }
    });
</script>

但最后我会得到下面的图像，复选框的值属性不会改变！为什么我会在每个复选框获得相同的值？

Answer 1

您需要绑定流派变量。

<input type="checkbox" v-model="selectedGenres" :value="genre">

将计算流派而不是仅仅给出字符串流派

Answer 2

我不确定，但我认为你应该更改你的代码：

value="genre"

并将其更改为：

v-bind:value="genre" or :value="genre"

v-for 循环。我将在每个复选框中获得相同的值

v-for loop. i will get same value at each checkbox

vue.js