如何使两个相同的 Vue 组件保持同步？

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

似乎每个 input.

问题的原因都相同 name

来自 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 组件保持同步？

How do I keep two identical Vue components in sync with each other?

radio-group

vue.js

vue-component