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

Question

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

我的复选框是一个嵌套组件，使用来自Vuetify的v-checkbox。我想向他的父母发送checked值。现在，我正在执行发射$event的工作，因为$emit包含true/false的值，但我不知道为什么（我认为我需要发射{{1 }}，但这是$event.target.checked。

undefined

我不明白为什么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值的正确方法是什么从孩子到父母。

Answer 1

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被推到父组件（子组件）。

Answer 2

移动

@change="$emit('change', $event)

获得方法优势

Answer 3

我有一个非常相似的问题，复杂的数据模型和嵌套的for循环。我需要一种简单的方法来获取更改了选中更改状态的v-checkbox。

这是我解决的方法：

<div v-for="unitLocation in groupedResources" v-bind:key="unitLocation.node.TelldusUnitLocation_Name">

    <v-checkbox
        @change="toggledLocation(unitLocation)"
        v-model="unitLocation.node.checked"
        :label="unitLocation.node.TelldusUnitLocation_Name"
        hide-details
    ></v-checkbox>

    <!-- more code here -->
</div>

（{unitLocation是本身具有node和children属性的嵌套对象，但这对解决方案并不重要）

然后在我的代码中：

methods: { 
  toggledLocation(args) {
    debugger; /*see image below, console in chrome*/
  }
}

Chrome中的输出（我在Chrome的调试控制台中打印了args参数）：