Question

如何获取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);
},

由于某种原因，它打印了一个鼠标事件TWICE，并且复选框本身未更改（未选中复选标记）。

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

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

那么有办法吗？

Answer 1

我看到您在循环时没有绑定键，并且内部有连接到单个变量的v-model。因此，无论何时更改某些复选框，其他所有复选框都会同时更新。因此，您需要为每个复选框使用新的v模型。为什么不在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)
}

Answer 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的正确值。

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

2 个答案: