@MeMoJlor

Почему не работает v-model?

Есть два компонента.

Родительский:

<template> 
<div class="sums">
  <Radio name="sum" :value="100" model="global" />
  <Radio name="sum" :value="200" model="global" />
</div>
</template>
<script>
  export default {
    data () {
      return {
        global: 0
      }
    }
</script>

Дочерний:

<template>
  <label :class="{labelActive: model === value}">
    <input type="radio" :v-model="model" :name="name" v-bind:value="value">
    {{value}}
  </label>
</template>

<script>
export default {
  props: ['name', 'value', 'model']
}
</script>

Почему-то v-model не работает и нет связи. Что здесь неправильно?
  • Вопрос задан
  • 639 просмотров
Решения вопроса 1
0xD34F
@0xD34F Куратор тега Vue.js
Не работает потому, что работать нечему - вы не используете v-model. Документацию, судя по показанной чуши, вы вообще не читали (максимум, одним глазом глянули её пересказ каким-нибудь дегенератом на youtube'е). Это зря. Документацию читать надо. Вот прямо сейчас откройте и почитайте. Ну а пока читаете, исправим ваш говнокод.

В родительском компоненте заменить model="global" на v-model="global".

В дочернем, добавить:

model: {
  prop: 'model',
},
computed: {
  checked() {
    return this.model === this.value;
  },
},

а шаблон пусть будет такой:

<label :class="{ labelActive: checked }">
  <input type="radio" :checked="checked" @input="$emit('input', value)">
  {{ value }}
</label>
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
dima9595
@dima9595
Junior PHP
<Radio name="sum" :value="200" model="global" />
model...
Вы же не строку передаёте.

<input type="radio" :v-model="model" :name="name" v-bind:value="value">

А это блин что? :v-model?

Для лучшего понимания что должно передаваться в пропах - указывайте им определённый тип.
Ответ написан
Комментировать
Ваш ответ на вопрос

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

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