Почему не работает v-model кастомной радиокнопки на VUE3?

Question

[6ondawave9]

Доброго времени суток! Пытаюсь сделать кастомный компонент - радиокнопку на VUE 3.
Не могу никак понять как правильно реализовать поддержку v-model и сделать компонент максимально простым для использования. Очень сильно запутался, а нагуглить что-то внятное не получается от слова совсем. Прошу помощи!

Parent

<template>
<RadioButton label="1" :value="'1'" name="test" v-model="radioState" @change="ConsoleLog(radioState)"></RadioButton>
<RadioButton label="2" :value="'2'" name="test" v-model="radioState" @change="ConsoleLog(radioState)"></RadioButton>
</template>
<script>
data() {
    return {
      radioState: '',
    }
},
methods: {
    ConsoleLog(value) {
      console.log(value)
    }
  }
</script>

Child

<template>
    <label>
      {{label}}
      <input type="radio" :name="name" :checked="isChecked" :value="value" @update:modelValue="$emit('change', $event.target.value)" />
    </label>
  </template>
  
<script>
  export default {
    model: {
      prop: 'modelValue',
      event: 'update:modelValue'
    },
    props: {
      "label": { type: String, default: "", required:true },
      "modelValue": { default: "" },
      "value": { type: String, default: undefined },
      "name": { type: String, default: 'test'}
    },
    computed: {
      isChecked() {
        return this.modelValue == this.value
      }
    }
  }
</script>

При нажатии на кнопки в консоли пустые сообщения

Comments

[WapSter]

А у input разве есть событие @update:modelValue

[6ondawave9]

WapSter, не уверен от слова совсем, уже просто пробовал всё подряд. Всё что смог найти в гугле не работало.

[WapSter]

6ondawave9, это событие имитить нужно наверх, а не использовать его там где оно не прослушывается

@input="$emit('update:modelValue', $event.target.value)"

и в родители оставь только v-model, а от этого избавься :value="'2'" @change="ConsoleLog(radioState)"

[6ondawave9]

WapSter, Сработало, бесконечно благодарен

Answer 1

[0xD34F]

@update:modelValue="$emit('change', $event.target.value)"

Да ну? Вы действительно считаете, что у радиокнопок бывает событие update:modelValue?

Местами поменяйте прослушиваемое и генерируемое, пусть будет

@change="$emit('update:modelValue', $event.target.value)"

model: {
  prop: 'modelValue',
  event: 'update:modelValue'
},

Этот кусок кода можете вырезать, потому что

BREAKING: v-bind's .sync modifier and component model option are removed and replaced with an argument on v-model;

Comments

[6ondawave9]

@change="$emit('update:modelValue', $event.target.value)" сработало, огромное спасибо