javascript - 表格内的复选框并使用 lodash 获取或删除 id

Question

大家好

我正在尝试创建一个带有复选框的表格。当我单击复选框时，id 将被添加到对象数组中。当我取消选中特定的复选框时，它会从数组中删除 id。

到目前为止，这是我的示例代码。

HTML 表格

...
<td><input type="checkbox" @click="checkThis(id)" /></td>
...

我的示例 vue.js 代码

import _ from 'lodash'

export default {
    data(){
        return{
            myArray: []
        }
    },
    methods:{
        checkThis(id){
            // for removing an object inside the array
            _.remove(this.myArray, {myArrayId: id})

            // way to push to array
            this.myArray = [...this.myArray, {
                myArrayId: id
            }]
        }
    }
}

此代码用于在用户取消选中特定复选框时删除 ID。

_.remove(this.myArray, {myArrayId: id})

但我的问题是，每当我单击该复选框时，它都不知道应该删除哪个 ID，或者该复选框是否已针对特定 ID 选中或未选中。

我想做的是，如果在表中的特定复选框中选中，它将在数组中添加 id，如果未选中，则删除数组中复选框的 id。

有什么帮助吗？

Answer 1

您好，这是您想要的吗？

你可以只使用带有 v-model 的复选框

<div id="vue">
<input type="checkbox" v-model="checkbox" :value="1" />
<input type="checkbox" v-model="checkbox" :value="2" />
<input type="checkbox" v-model="checkbox" :value="3" />
{{checkbox}}
</div>


new Vue({
    el:'#vue',
  data:{
    checkbox:[],
  }
})

https://jsfiddle.net/ke5y39cf/