CODEWITHSUNDEEP
javascriptvue.js
Green_qaue
Green_qaue

Reputation: 3661

Vue - Bind value of object to a checkbox value

I want to put the value of every item into array selectedParks. The problem is, the value is always set to string "item", and not the value of the actual item (it's a Park Object).

Code:

<ul class="list-group no-bullets">
    <li class="list-group-item" v-for="item in parks">
        <label><input type="checkbox" value="item" v-model="selectedParks"/> {{item.name}}</label>
    </li>
</ul>
<span>Checked: {{selectedParks}}</span>

I know that the actual item is bound correctly, because {{item.name}} shows the correct value.

Docs (multiple checkboxes bound to the same array): https://v2.vuejs.org/v2/guide/forms.html

Upvotes: 6

Views: 15920

Answers (1)

craig_h
craig_h

Reputation: 32704

That because value is being assessed as a string, you need to use v-bind to set it as an object:

<input type="checkbox" v-bind:value="item" v-model="selectedParks"/>

or the colon shorthand:

<input type="checkbox" :value="item" v-model="selectedParks"/>

Upvotes: 14

Related Questions