如何获取 Vuetify 复选框 event.target.checked 和 event.target.value？

Question

如何获取 Vuetify 复选框 event.target.checked 和 event.target.value？

我在我的应用程序中使用 Vuetify 的复选框。当用户选中/取消选中它时，我想获取checked和value属性。

我意识到它不是本机复选框元素，所以我无法访问event.target.checkedor event.target.value，但肯定有办法做到这一点。我尝试了以下方法：

<p v-for="(linkType, index) in linkTypes" v-if='linksLoaded'>
    <v-checkbox
        color="info"
        :label="linkType"
        :value="linkType"
        v-model="checkedLinks"
        @click="onCheckboxClicked($event)"></v-checkbox>
</p>

...
onCheckboxClicked: function(e) {
  console.log(e);
},

出于某种原因，它打印了一个鼠标事件 TWICE 并且复选框本身没有改变（复选标记没有被取消选中）。

@click.native 打印相同的鼠标事件，但一次。

我试过@change="onCheckboxClicked"- 打印了 v 模型。

那么有没有办法做到这一点？

Answer 1

I see that you are looping without binding a key, and inside you have v-model which is hooked to a single variable. So, whenever some checkbox is changed all others will update simultaneously. So you need new v-model for each checkbox. Why not add another property in linkTypes so you can v-model="linkType.checked".

change is the name of the event which gets triggered whenever checkbox value is changed and value is passed as a parameter.

<v-checkbox
    @change="checkboxUpdated"
    color="info"
    :label="linkType"
    :value="linkType"
    v-model="checkedLinks"
    @click="onCheckboxClicked($event)"></v-checkbox>

and in methods you need

checkboxUpdated(newValue){
  console.log(newValue)
}