Vue - 将对象的值绑定到复选框值

Question

我想将每个项目的值放入数组selectedParks。问题是，该值始终设置为字符串“item”，而不是实际项目的值（它是一个公园对象）。

代码：

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

我知道实际的item 绑定正确，因为{{item.name}} 显示了正确的值。

Docs（多个复选框绑定到同一个数组）：https://vuejs.org/v2/guide/forms.html

Answer 1

那因为value被评估为一个字符串，你需要使用v-bind将它设置为一个对象：

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

或冒号简写：

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