Question

我的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">

所以我使用分隔符#来分隔值。似乎有效

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

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

我就是这样做的，希望这有帮助吗？

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

1 个答案: