javascript-如何在Vue中使用Vuetify发出检查值

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了javascript-如何在Vue中使用Vuetify发出检查值，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1276字，纯文字阅读大概需要2分钟。

内容图文

如何以正确的方式将孩子的“检查”值发送给父母？

我的复选框是使用Vuetify中的v复选框的嵌套组件.我想将检查后的值发送给他的父母.现在,我正在执行发出$event的操作,并且可以正常工作,因为$emit包含true / false值,但我不知道为什么(我认为我需要发出$event.target.checked,但这是未定义的) .

Checkbox.vue

<template>
  <v-checkbox color="primaryGreen" hide-details @change="$emit('change', $event)">
    <span slot="label" class="checkbox-label">
      <slot></slot>
    </span>
  </v-checkbox>
</template>

Form.vue (parent)

<v-layout id="different-address-checkbox">
  <v-flex>
   <checkbox @change="sth">
    <span>Different Address</span>
   </checkbox>
  </v-flex>
</v-layout>

export default {
  data() {
    return {
      differentAddress: false
    };
  },
  methods: {
    sth(value) {
      this.differentAddress = value;
    }
  }
};

我不明白为什么$emit包含true / false而不是包含带有event.target.checked的整个事件,并且我不确定从子级向父级发出检查值的正确方法是什么.

解决方法:

v-checkbox不是本机表单元素.它发出Vuetify框架的作者决定发出的任何内容.在这种情况下,为布尔值.

您是正确的,在使用表单元素时,通常需要使用$event.target.checked或$event.target.value访问值,但这不适用于自定义组件.

这是Vuetify source中的相关部分：

internalValue: {
    get () {
      return this.lazyValue
    },
    set (val) {
      this.lazyValue = val
      this.$emit(this.$_modelEvent, val)
    }
},

当组件的值更改时,将internalValue推送到父组件(子组件).

内容总结

以上是互联网集市为您收集整理的javascript-如何在Vue中使用Vuetify发出检查值全部内容，希望文章能够帮你解决javascript-如何在Vue中使用Vuetify发出检查值所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---