Vue - Bind value of object to a checkbox value

Question

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

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