[Vue] RadioButton valueが同じRadioボタンが連動してしまう

Question

概要

vueを用いてラジオボタンのコンポーネントを作成しています。
nameはそれぞれのラジオボタングループごとに分けているのですが、valueの値が一部かぶっています。
この時にかぶっているラジオボタンが全て最初に作られたラジオボタンに対してのチェックになってしまいます。
→10000~20000をクリック→

¥10000~¥20000のラジオボタンをクリックすると人気順のラジオボタンが反応してしまいます。人気順をクリックすると人気順がチェックされます。
その他のvalueが異なるものは正常に動いています。

コード

子コンポーネント

<template>
  <div class="filter-list order">
    <p>{{ title }}</p>
    <ul>
      <li v-for="data in listData" :key="data.value">
        <input
          type="radio"
          :name="name"
          :id="data.value"
          :value="data.value"
        />
        <label :for="data.value">{{ data.label }}</label>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    title: String,
    name: String,
    listData: Array
  }
};
</script>

<style lang="scss" scoped>
input:checked + label {
  color: red;
}
input {
  display: none;
}
.filter-list {
  margin: 10px;
  padding: 20px;
  border: 1px solid blanchedalmond;
  p {
    background-color: black;
    color: white;
  }
  li {
    border-bottom: 1px solid #ddd;
    margin-top: 5px;
    cursor: pointer;
  }
}
</style>

親コンポーネント

<template>
  <div id="sidebar">
    <SidebarRadioList
      name="order-filter"
      :listData="this.orderListData"
      title="並べ替え"
    />
    <SidebarRadioList
      name="price-filter"
      :listData="this.priceListData"
      title="価格で絞り込む"
    />
</template>
<script>
import SidebarRadioList from './SidebarRadioList';
export default {
  components: {
    SidebarRadioList
  },
  data() {
    return {
      orderFilter: null,
      orderListData: [
        {
          label: '価格が安い順',
          value: 1
        },
        {
          label: '価格が高い順',
          value: 2
        },
        {
          label: '人気順',
          value: 3
        }
      ],
      priceListData: [
        {
          label: '↓ ¥5000',
          value: 4
        },
        {
          label: '¥5000 ~ ¥10000',
          value: 5
        },
        {
          label: '¥10000 ~ ¥20000',
          value: 3
        }
      ]
    };
  }
};
</script>

何か些細なことでも構いません。よろしくお願いいたします。

Comments

[rubytomato]

inputタグのidが一意になるようにするとどうですか?

[muteki_gamer]

ありがとうございます。できました！
完全に理解しました。labelクリックしてドキュメントのid探しに行くんで当たり前でしたね。

[rubytomato]

IDが重複しているのが気になってコメントしただけなので私もよくわかりません。その辺りのことを質問に追記して回答を待ってみるのもいいと思います。

Answer 1

labelクリックしてforで紐付けたidを探しに行く。idは一意のはずだからドキュメント内の最初に出てくるidのみ対象。上にチェックがつく。
nameを接頭語にしてIDを一意にして解決

子コンポーネント

<template>
  <div class="filter-list order">
    <p>{{ title }}</p>
    <ul>
      <li v-for="data in listData" :key="data.value">
        <input
          type="radio"
          :name="name"
          :id="name + '_' + data.value"
          :value="data.value"
        />
        <label :for="name + '_' + data.value">{{ data.label }}</label>
      </li>
    </ul>
  </div>
</template>