Как мне синхронизировать два идентичных компонента Vue друг с другом? - PullRequest
Новая
       6

Как мне синхронизировать два идентичных компонента Vue друг с другом?

0 голосов
/ 03 марта 2019

Я пытаюсь заставить два кластера переключателей на одной странице (но внутри разных ящиков) синхронизироваться друг с другом.Это работало до того, как я разбил их на компонент.

Теперь мой компонент выглядит следующим образом: 

Vue.component('radio-cluster', {
props: ['value'],
template: `
    ...
    <input type="radio" name="radio" value="Hour" :checked="value == 'Hour'" @input="$emit('input', $event.target.value)">
    <input type="radio" name="radio" value="Week" :checked="value == 'Week'" @input="$emit('input', $event.target.value)">
    ...
    `,
});

Экземпляр Vue: 

new Vue({
el: '#app',
data: function () {
    return {
        timePeriod: "Hour"
    }
});

И соответствующий HTML:

<div id="app">
    <radio-cluster v-model="timePeriod"></radio-cluster>
    ...
    <radio-cluster v-model="timePeriod"></radio-cluster>
</div>

Я получаю странное поведение.Он будет правильно отображаться в одном из двух кластеров и генерировать правильное событие из любого из них.Но другой компонент игнорирует событие из того, на который я нажал. Как я могу заставить Vue принимать значение, обновленное в одном компоненте, и автоматически передавать его другому при каждом обновлении?

1 Ответ

0 голосов
/ 03 марта 2019

Кажется, что причина вашей проблемы одна и та же name для каждого input.

Из документации
Радиогруппа определяется путем предоставления каждомуиз радио кнопок в группе с тем же именем.Как только радиогруппа установлена, выбор любой радиокнопки в этой группе автоматически отменяет выбор любой текущей радиокнопки в той же группе.

Попробуйте удалить атрибут name: 

<input type="radio" value="Hour" :checked="value == 'Hour'" @input="$emit('input', $event.target.value)">
<input type="radio" value="Week" :checked="value == 'Week'" @input="$emit('input', $event.target.value)">

если требуется атрибут name, используйте разные имена для каждого компонента.
Спасибо @Ferrybig за комментарий.

...