Chupachar
@Chupachar
front-end dev

Как правильно в vue3 передать событие из дочернего компонента в родительский?

Всем привет, есть 10 радиобатоннов и проблема заключается в том, что при клике например по 6 радиобатонну удаляются 7, 8, 9, 10 итерации по какой-то причине, не могу понять почему. Примерное описание что делаю: есть родительский компонент - ReviewsForm.vue и дочерний компонент RatingSelect.vue. Я передаю const rating = ref(10) из родительского в дочерний с помощью:rating="rating", в дочернем я инициализирую пропс и присваиваю его переменной selected здесь const selected = ref(props.rating). Далее я слежу за изменениями selected с помощью watch, определяю emit и передаю родителю rating здесь @setRating="rating = $event"

https://codesandbox.io/s/pedantic-thompson-hlnkbx?...

Родительский компонент:
<template>
  <form>
    <RatingSelect :rating="rating" @setRating="rating = $event" />
  </form>
</template>
<script setup>
import { ref, watch } from "vue";
import RatingSelect from "./RatingSelect.vue";

const rating = ref(10);

watch(rating, (newValue) => {
  console.log("newValue: ", newValue);
});
</script>


Дочерний компонент:
<template>
  <div>
    <ul class="rating">
      <li v-for="n in rating" :key="`rating-${n}`">
        <input
          type="radio"
          :id="`num${n}`"
          name="rating"
          :value="n"
          :checked="selected === n"
          v-model="selected"
        />
        <label :for="`num${n}`">{{ n }}</label>
      </li>
    </ul>
  </div>
</template>
  
  <script setup>
import { defineProps, defineEmits, ref, watch } from "vue";

const props = defineProps({
  rating: {
    type: Number,
    required: true,
  },
});

const selected = ref(props.rating);

const emit = defineEmits(["setRating"]);

watch(selected, (newValue) => {
  emit("setRating", newValue);
});
</script>
  • Вопрос задан
  • 265 просмотров
Решения вопроса 1
0xD34F
@0xD34F Куратор тега Vue.js
<RatingSelect v-model="rating" />

const props = defineProps({
  modelValue: {
    type: Number,
    required: true,
  },
  maxRating: {
    type: Number,
    default: 10,
  },
});

const emit = defineEmits([ 'update:modelValue' ]);

const selected = computed({
  get: () => props.modelValue,
  set: val => emit('update:modelValue', val),
});

<li v-for="n in maxRating">
  <label>
    <input type="radio" :value="n" v-model="selected">
    {{ n }}
  </label>
</li>
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы