javascript - v-绑定(bind) :checked not working in all component instances

Question

这是我的广播列表组件:

<template>
    <div class="list">
      <div class="radio">
        <input type="radio" name="radio-hashtags" :id="'radio-hashtags-full-' + cid" value="" @change="updateHashTag" :checked="selectHashTag === ''">
        <label :for="'radio-hashtags-full-' + cid">All</label>
      </div>
      <div v-for="tag in hashTags" :key="tag" class="radio">
        <input type="radio" name="radio-hashtags" :id="'radio-hashtags-' + tag + '-' + cid" :value="tag" @change="updateHashTag" :checked="selectHashTag === tag">
        <label :for="'radio-hashtags-' + tag + '-' + cid">{{ tag }}</label>
      </div>
    </div>
</template>

<script>

export default {
  name: 'RadiosHashTags',
  props: ['hashTags', 'cid', 'selectHashTag'],
  methods: {
    updateHashTag (event) {
      this.$emit('updateHashTag', event.target.value)
    }
  }
}
</script>

调用此组件:

<RadiosHashTags :hashTags="hashTags" :selectHashTag="selectHashTag" cid="1" @updateHashTag="updateHashTag"/>

在父组件中，我只需更改 selectHashTag 值:

updateHashTag ($event) {
  this.selectHashTag = $event
},

如果页面上只有该组件的一个实例，它就可以正常工作。但我想在两个不同的组件中使用它两次。这样做，当我在任何实例中单击时，selectHashTag都会更改，但检查仅适用于最后一个实例。

我创建了一个简单的示例:https://codesandbox.io/s/happy-almeida-8w7jy

Answer 1

我解决了将 name 静态属性更改为动态属性的问题，如下所示:

<input type="radio" :name="'radio-hashtags-' + tag + '-' + cid" :id="'radio-hashtags-' + tag + '-' + cid" :value="tag" @change="updateHashTag" :checked="selectHashTag === tag">