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

【问题标题】：How to get Vuetify checkbox event.target.checked and event.target.value?如何获取 Vuetify 复选框 event.target.checked 和 event.target.value？
【发布时间】：2019-08-25 19:42:03
【问题描述】：

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

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

我意识到它不是原生复选框元素，所以我无法访问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。

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

【问题讨论】：

标签： vue.js vuetify.js

【解决方案1】：

我看到您在没有绑定键的情况下进行循环，并且在您的内部有 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>

您需要在methods 中

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

【讨论】：

【解决方案2】：

点击后检查复选框是否被选中的简单方法是检查它的值。如果它是 null 或空数组，那么你可以假设它没有被检查。这取决于您如何初始化变量。这是获得您想要的最安全的方式。

<v-checkbox
   v-for="(el, index) in checkboxes"
   :key="index"
   v-model="checkbox[index]"
   :value="el"
   :label="`Checkbox ${index}`"
   @change="valueChanged($event, index)"
></v-checkbox>


new Vue({
  el: '#app',
  data () {
    return {
      checkboxes: ['Opt 1', 'Opt 2', 'Opt 3', 'Opt 4'],
      checkbox: [],
    }
  },
  methods: {
    onChange(val, i) {
       console.log(val, i, this.checkbox)
        if (val === null || val.length === 0) { // Custom checks in this
          console.log('Unchecked')
        } else {
          console.log('Checked')
        }
      }
  }
})

如果您确实需要访问该元素，那么您可以使用 ref 来获取该组件。然后尝试在组件内部找到输入元素。然后找到该输入元素的检查值。但根据库的实现方式，您可能无法获得正确的 $refs.checkbox.$el.target.checked 值。

【讨论】：