Início / coding / Perguntas / 77032164
Accepted
user3953989
Asked: 2023-09-03 19:54:01 +0800 CST

Como criar um componente de grupo de botões de opção com vue3 e vuetify

  • 772

Usando Vue3 e Vuetify para criar um componente de botão de opção sim/não.

Recebo este erro com o código abaixo. Unexpected mutation of "selectedValue" prop. Entendo que os adereços não devem ser alterados, mas não consigo entender como implementar algo assim.

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 respostas

  1. Best Answer

    Você deve definir v-modelo pai no <YesNoRadioButton />elemento, então, seguindo a documentação do Vue sobre como definir um modelo v em um componente personalizado, o componente filho precisa receber o modelo v como um suporte. Este suporte deve ser vinculado ao <v-radio-group>(ligação unidirecional, não como modelo v) e, em seguida, o grupo de rádio deve emitir seu valor atualizado para o pai, o que completará a ligação bidirecional entre o modelo v pai e o rádio -grupo.

    Pai.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>

    Exemplo do Vuetify Playground

    • 1

relate perguntas