主页 / coding / 问题 / 77032164
Accepted
user3953989
Asked: 2023-09-03 19:54:01 +0800 CST

如何使用 vue3 和 vuetify 创建单选按钮组组件

  • 772

使用 Vue3 和 Vuetify 创建是/否单选按钮组件。

我使用下面的代码收到此错误Unexpected mutation of "selectedValue" prop. 我知道道具不应该更改，但无法理解如何实现这样的东西。

YesNoRadioButton.vue

<template>
    <v-radio-group inline :label=title v-model=selectedValue>
        <v-radio label="Yes" :value=true></v-radio>
        <v-radio label="No" :value=false></v-radio>
    </v-radio-group>
</template>

<script setup>
import { defineProps } from 'vue'

defineProps({
    title: String,
    selectedValue: Boolean
})

</script>

Parent.vue

<template>
    <YesNoRadioButton title="Are You Sure?" :selectedValue=userAnswer />
</template>

<script setup>
    import  YesNoRadioButton from './YesNoRadioButton.vue'
    const userAnswer = ref(true);
</script>
vue.js

1 个回答

  1. Best Answer

    您应该v-model在元素的父级中进行设置<YesNoRadioButton />，然后，按照有关在自定义组件上设置 v-model 的Vue 文档，子组件需要接收 v-model 作为 prop。该 prop 应该绑定到<v-radio-group>（单向绑定，而不是v-model），然后 radio-group 应该将其更新值发送给父级，这将完成父级 v-model 和 radio 之间的双向绑定-团体。

    家长.vue

    <template>
  <YesNoRadioButton title="Are You Sure?" v-model="userAnswer" />
</template>

<script setup>
  import { ref } from 'vue'
  import YesNoRadioButton from './YesNoRadioButton.vue'

  const userAnswer = ref(true)
</script>

    YesNoRadioButton.vue

    <template>
  <v-radio-group
    inline
    :label="title"
    :model-value="modelValue"
    @update:modelValue="$emit('update:modelValue', $event)"
  >
    <v-radio label="Yes" :value="true"></v-radio>
    <v-radio label="No" :value="false"></v-radio>
  </v-radio-group>
</template>

<script setup>
  defineProps({
    title: String,
    modelValue: Boolean,
  })
  defineEmits(['update:modelValue'])
</script>

    Vuetify Playground 示例

    • 1

相关问题