CODEWITHSUNDEEP
vue.js
leila haghjo
leila haghjo

Reputation: 21

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

i'm going to show a loop for user's favourite music genres. but i want to read them from a property inside my Vue instance. here is my code: 

<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>

but at the end i will get following image and value attribute of checkboxes will not change! why i will get same values at each checkbox?

same values at each checkbox

Upvotes: 1

Views: 1357

Answers (2)

Mostafa Ghanbari
Mostafa Ghanbari

Reputation: 374

i am not sure but i think you should change your code in where it says:

value="genre"

and change it to:

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

Upvotes: 2

Kyle Becker
Kyle Becker

Reputation: 1440

You need to bind the genre variable.

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

Will compute genre instead of just giving the string genre

Upvotes: 2

Related Questions