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

Question

我想将每个项目的值放入数组中selectedParks.问题是,值始终设置为字符串"item",而不是实际项目的值(它是Park对象).

码:

<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}}显示正确的值.

文档(绑定到同一数组的多个复选框):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"/>