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

Question

如何获取 Vuetify checkbox event.target.checked 和 event.target.value？

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

我意识到它不是 native 复选框元素，所以我无法访问 event.target.checked 或 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);
},

出于某种原因，它打印了两次鼠标事件并且复选框本身没有改变(复选标记没有被取消选中)。

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

我尝试了 @change="onCheckboxClicked" - 打印了 v-model。

那么有什么办法吗？

Answer 1

我看到您在没有绑定(bind)键的情况下进行循环，并且在您内部有一个 Hook 到单个变量的 v-model。因此，每当更改某个复选框时，所有其他复选框都会同时更新。所以每个复选框都需要新的 v-model。为什么不在 linkTypes 中添加另一个属性，这样您就可以 v-model="linkType.checked"。

change 是事件的名称，每当更改复选框值并将值作为参数传递时都会触发该事件。

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

在方法中你需要

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