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

如何获取 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 模型。

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

我看到您在没有绑定键的情况下循环，并且在内部有钩接到单个变量的 v-model。因此，每当更改某些复选框时，所有其他复选框都将同时更新。因此，您需要为每个复选框提供新的 v 模型。为什么不在链接类型中添加另一个属性，以便您可以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)
}

单击后访问复选框是否被选中的简单方法是检查其值。如果它是空数组或空数组，那么您可以假设它未被选中。这取决于您如何初始化变量。这是获得所需内容的最安全方法。

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

您正在寻找一个事件。如果您想知道您的复选框是否被选中，您应该使用这个：

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

正如你已经注意到的，Vuetify 复选框不是原生的复选框元素。因此，event.target.checked和event.target.value不存在。要解决此问题，需要做两件事：

禁用v-checkbox的ripple效果。否则，input复选框标签顶部将有一个div。然后，event.target是我们期望的。
但是，当用户单击标签时，也会影响复选框。在这种情况下，我们需要通过以下方式访问复选框 event.target.control .

问题中的复选框应如下所示：

<v-checkbox
  color="info"
  :ripple="false"
  :label="linkType"
  :value="linkType"
  v-model="checkedLinks"
  @click.native="onCheckboxClicked"
/>

然后，在onCheckboxClicked方法中：

const onCheckboxClicked = (event) => {
  const target = event.target.control ?? event.target;
  const isChecked = target.checked;
  const value = target.value;
  // Do something here...
};

请注意，我们对 click 事件使用了.native修饰符。否则，event.target.control.checked将给出相反的值(false选中复选框时，反之亦然(。

小提示：使用v-for时应始终绑定key值。

相关内容

最新更新

热门标签：