vuejs radio button component

Question

Я пытаюсь сделать этот пользовательский компонент переключателя для работы в vuejs. Как установить переключатель со значением из родительского компонента. Я знаю, что вы используете v-модель и устанавливаете ее в одно значение в одном из входных значений, но похоже, что это не работает.

компонент: export default Vue.component('radioButton', { template, props: ['name', 'label', 'id', 'value'] })

шаблон компонента:

<label class="radio" :for="id"> 
    <input type="radio" :id="id" class="radio-button" :value="value" :name="name"> 
    <span class="radio-circle"> 
    </span> 
    <span class="radio-circle__inner"> 
    </span> 
    <span class="radio-button__label">{{ label }}</span> 
</label> 

HTML:

<radio-button name="options" id="option-1" label="1" :value="selectedValue" /> 
<radio-button name="options" id="option-2" label="2" :value="selectedValue" /> 

Answer 1

Для радиокнопок, вам нужно передать истинными или ложными для проверенного свойства для предварительной настройки его к некоторому состоянию. В качестве альтернативы, ваше значение в v-model должно быть равно value переключателя, чтобы он был проверен.

В ограниченном образце кода вы в курсе, я полагаю, ваш ярлык индекс кнопки, как 1, 2, 3 и так далее ... И я думаю, что вы хотите выбрать одну из кнопок, когда selectedValue матчей label из этот переключатель. Например, если selectedValue равно 2, вам нужно установить переключатель 2.

Учитывая вышеизложенное является правильным, вам нужно внести изменения в одну строку в вашем компоненте шаблона radio-button:

<input type="radio" class="radio-button" :value="label" :name="name" v-model="value"> 

Примечание:

1. Ваша кнопка label является значением для радио-кнопки. Это то, что вы ожидаете установить для selectedValue, когда вы нажимаете на определенный переключатель.

2. Ваш value в дочернем компоненте на самом деле является selectedValue родительского компонента, который указывает кнопку радио, которая в данный момент выбрана. Так что это должно идти в v-model

Так, в соответствии с Документами на Form Input Bindings, ваша кнопка радио провериться, если переменная v-модель равна стоимости этой кнопки радио.

Но вот еще одна проблема: если вы нажмете на другой переключатель, вы ожидаете, что в родительском компоненте будет изменен selectedValue. Этого не произойдет, потому что props дает вам только одностороннюю привязку.

Для решения этой проблемы необходимо выполнить выделение $ из дочернего компонента (радиокнопка) и зафиксировать его в родительском компоненте (вашей форме).

Вот рабочий jsFiddle пример: https://jsfiddle.net/mani04/3uznmk72/

В этом примере шаблон формы определяет компоненты радио-кнопки следующим образом:

<radio-button name="options" label="1" :value="selectedValue" @change="changeValue"/> 
<radio-button name="options" label="2" :value="selectedValue" @change="changeValue"/> 

Всякий раз, когда изменяется значение внутри дочернего компонента, он будет пропускать событие «change» вместе с меткой переключателя, которая передается методу changeValue() компонента родительской формы.После изменения родительского компонента selectedValue ваши радиокнопки обновляются автоматически.

Надеюсь, это поможет!