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): .html

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/v2/guide/forms.html

• javascript
• vue.js

• Could you describe the Park Object data structure? – krisanalfa Commented Oct 26, 2017 at 11:42

1 Answer 1

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