javascript - Vue js 标签和单选按钮的表单绑定(bind)

Question

我正在尝试生成一个表单列表，这些表单是根据数据动态轮询的。但是，使用 :for 或 v-bind:for 不会在浏览器中生成任何 html 标记，因此标签在单击时不会选择相对输入。我创建了一个 JSFiddle (由于某种原因，SCSS 无法在 JS Fiddle 中工作)。该项目也是 Nuxt 构建。

代码: https://jsfiddle.net/mc4rdle/o19bgjpe/2/

标记:

<div class="option" v-for="answer in poll.answers" :key="answer.answer.id">
  <input type="radio" :id="answer.id" :value="answer.answer">
  <label class="option" :for="answer.id">
     <div class="indicator"></div>
     <div class="label">{{ answer.answer }}</div>
   </label>
</div>

数据:民意调查:[

{
                    id: 1,
                    question: 'How do you feel about your current salary?',
                    answers: [
                        {
                            id: 1,
                            answer: 'Satisfied'
                        },
                        {
                            id: 2,
                            answer: 'Content'
                        },
                        {
                            id: 3,
                            answer: 'Unhappy'
                        }
                    ]
                },
                {
                    id: 2,
                    question: 'What group activity should we do??',
                    answers: [
                        {
                            id: 1,
                            answer: 'Yoga'
                        },
                        {
                            id: 2,
                            answer: 'Table Tennis'
                        },
                        {
                            id: 3,
                            answer: 'Pints'
                        }
                    ]
                }
            ]

提前致谢:)

Answer 1

您的输入 ID 重复，因为它仅基于答案的 ID。您可以通过组合 poll.id + '-' + answer.id

使其独一无二

    <div class="option" v-for="answer in poll.answers" :key="answer.answer.id">
      <input type="radio" :id="poll.id + '-' + answer.id" :value="answer.answer" :name="poll.id">
      <label class="option" :for="poll.id + '-' + answer.id">
        <div class="indicator"></div>
        <div class="label">{{ answer.answer }}</div>
      </label>
    </div>

演示 jsfiddle