如何在 vue.js 2 上的 v-model 中保存多个值？答案

【问题标题】：How can I save multiple value in v-model on vue.js 2?如何在 vue.js 2 上的 v-model 中保存多个值？
【发布时间】：2018-04-24 23:18:39
【问题描述】：

我的 vue 组件是这样的：

<template>
    <div class="panel panel-default">
        <a @click="deleteAll" href="javascript:" class="btn btn-danger pull-right">
            <span class="fa fa-trash"></span> Delete All
        </a>    
        ...
            <tr v-for="item in list">
                <td>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" :value="item.id" v-model="checkedData">
                        </label>
                    </div>
                </td>
                ...
            </tr>
        ...
    </div>
</template>
<script>
    export default {
        data() {
            return {
                checkedData: []
            }
        },
        methods: {
            deleteAll() {
                this.$http.post(window.BaseUrl+'/message/deleteAll', {ids: this.checkedData})
            }
        }
    }
</script>

如果我选中某个复选框并单击删除所有按钮，它将通过 ajax 发送值 item.id

我也想发送另一个值。我有价值item.seller_id 和item.buyer_id

我尝试这样：

<input type="checkbox" :value="item._id+'#'+item.seller_id+'#'+item.buyer_id" v-model="checkedData">

所以我使用分隔符# 来分隔值。好像有效

这是否是最好的解决方案？还是有其他更好的解决方案？

【问题讨论】：

这真的有效吗？我希望迭代器内的<input type="checkbox" :value="item.id" v-model="checkedData"> 不起作用，因为您对所有项目使用相同的（数组）模型。无论如何，如果你可以清理你的模型以便它保存所需的数据，那么使用 post ajax 调用传递它是直截了当的。当然这也可能取决于你的后端

标签： vue.js vuejs2 vue-component vuex

【解决方案1】：

您好，请看这个https://jsfiddle.net/p8zhrg6g/29/。

<div v-for="item in list">
    <input type="checkbox" :id="item.id" :value="item.value" v-model="checkedNames">
    <label :for="item.id">{{item.value}}</label>

这就是我的做法，希望对你有帮助吗？

【讨论】：

【解决方案2】：

只需将值放入数组中：value..

<div v-for="item in list">
    <input type="checkbox" :id="item.id" :value="[item.name, item.value]" v-model="checkedNames">
    <label :for="item.id">{{item.value}}</label>

当你想调用另一个元素中的值时，你可以根据它们的值索引调用值，例如 {{item[0]}} 将显示 item.name 并且 {{item[1]}} 将显示 value.value

【讨论】：