Vuetify 无线电组组件 - 将值绑定到父级中的 v-model

Question

我有以下内容。父视图中有两个字段位于父表单中。 v-text-field 正在按预期工作，它绑定到父级中的模型。代码片段中显示的单选字段没有。我找到了一个解决方法，它涉及给收音机一个 v-model 本身并发出一个 v-on:change 事件并使用父视图中的方法处理它。我想知道是否有一种更优雅的方式来执行此操作，类似于对文本字段所做的操作。

Form.vue

<Text v-model="textVal"></Text>
<Radio v-model="radioVal"></Radio>

export default {
  data() {
    return {
      textVal: '',
      radioVal: '',
    }
  }
}

Text.vue

<v-text-field
  :value="value"
  v-on:input="$emit('input', $event)"
></v-text-field>

Radio.vue

<v-radio-group
  :value="value"
  v-on:input="$emit('input', $event)"
>
  <v-radio value="one" label="One"></v-radio>
  <v-radio value="two" label="Two"></v-radio>
</v-radio-group>

Answer 1

收音机应该像这样发出一个输入事件：

<v-radio-group
  :value="value"
  v-on:change="$emit('input', $event)"
>

Vuetify 无线电组组件 - 将值绑定到父级中的 v-model

Vuetify radio group component - bind value to v-model in parent

javascript

vuejs2

vuetify.js