Question

我正在尝试使同一页面上的两个单选按钮群集（但在不同的抽屉中）彼此保持同步。在我将它们分解成一个组件之前，这是可行的。

现在我的组件看起来像：

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在一个组件中获取更新的值，并在每次更新时自动将其分配给另一个组件？

Answer 1

每个问题name的原因似乎都是input。

来自documentation
通过为组中的每个单选按钮赋予相同的名称来定义单选组。建立单选组后，选择该组中的任何单选按钮会自动取消选择同一组中当前选中的任何单选按钮。

尝试删除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的评论。

如何使两个相同的Vue组件彼此同步？

1 个答案: