같은 값의 라디오 버튼을 재사용하려면 어떻게 해야 합니까?

같은 값의 라디오 버튼을 재사용하려면 어떻게 해야 합니까?

나는 Vue의 초보자이고 무언가를 하면서 배운다.체크박스를 다시 사용할 수 있게 했는데 라디오 버튼에 이상한 결과가 나왔어요.데이터가 배열 형식으로 저장되어 있습니다.ProgramDesign.vue:

data() {
  return {
    strategies: [
      "Not Important",
      "Slightly Important",
      "Moderately Important",
      "Very Important",
      "Extremely Important",
    ],
  };
},

모든 질문에서 반복되는 옵션입니다.라디오용 컴포넌트를 따로 만들었습니다.

<template>
  <div>
    <span v-for="strategy in groups" :key="strategy">
      <input :id="strategy" class="radio-style" name="strategy" type="radio" />
      <label :for="strategy" class="radio-style-3-label">{{strategy}}</label>
    </span>
  </div>
</template>
<script>
export default {
  props: {
    groups: Array,
  },
};
</script>

에서의 사용법은 다음과 같습니다.ProgramDesign.vue:

<p>first question goes here ?</p>
<RadioButton :groups="strategies" />
<div class="line"></div>
<p>second question goes here ?</p>
<RadioButton :groups="strategies" />

재사용 가능한 출력을 얻을 수 있었지만, 두 번째 질문의 라디오 버튼을 클릭하면 첫 번째 질문의 버튼이 선택됩니다.어떻게 하면 고칠 수 있을까요?

문제는inputID와 이름은 두 개의 렌더링에서 볼 수 있듯이 컴포넌트 인스턴스 간에 고유하지 않습니다.RadioButton컴포넌트(간단함을 위해 인증):

<!-- RadioButton 1 -->
<div>
  <span>
    <input id="Not Important" name="strategy" type="radio">
    <label for="Not Important">Not Important</label>
  </span>
</div>

<!-- RadioButton 2 -->
<div>
  <span>
    <input id="Not Important"❌ name="strategy"❌ type="radio">
    <label for="Not Important">Not Important</label>
  </span>
</div>

각각label에 링크되어 있습니다.input매칭함으로써for그리고.idAtribute를 클릭합니다.label링크된 무선의 원인input값을 변경합니다.여러 개일 때input같은 식별자를 가진 브라우저는 다음 링크에 접속합니다.label일등 항해사input이로 인해 관찰한 동작이 발생합니다.

그name그룹 간에도 일의여야 합니다(RadioButtoninstance)는 브라우저에 의해 무선 그룹이 생성되기 때문에input일치하는 이름을 가진 것.

솔루션

또는,label그리고.input접속할 수 있다input내부label해결,id/for복제(및 가독성 향상):

<label>
  <input name="strategy" type="radio">
  Not Important
</label>

그리고 중복을 해결하는 한 가지 방법은name는 인스턴스별로 증가하는 카운터에 따라 이름을 지정합니다.

<template>
  <div>
    <label v-for="strategy in groups" :key="strategy">
      <input :name="'strategy' + groupId" type="radio">
      {{strategy}}
    </label>
  </div>
</template>

<script>
let groupId = 0

export default {
  props: {
    groups: Array
  },
  data() {
    return {
      groupId: groupId++
    }
  }
}
</script>

언급URL : https://stackoverflow.com/questions/63066293/how-to-make-radio-buttons-with-same-value-reusable