Question

大家好，

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

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

HTML表格

public void callId() throws URISyntaxException,IOException {
Interface.DeleteComment deleteComment = Feign.builder()
                    .client(new OkHttpClient())
                    .encoder(new JacksonEncoder())
                    .decoder(new JacksonDecoder())
                    .logger(new Slf4jLogger(Interface.DeleteComment.class))
                    .logLevel(Logger.Level.FULL)
                    .target(Interface.DeleteComment.class, "http://localhost:3000/comments/" + networkConfigurationProperties.id());
}

我的示例vue.js代码

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

如果用户取消选中特定复选框，此代码将删除ID。

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，或者该复选框是否已针对特定ID选中或未选中。

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

请帮忙吗？

Answer 1

你好，这就是你想要的吗？

您可以仅将复选框与v模型一起使用

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

表格内的复选框，并使用lodash获取或删除ID

1 个答案: