代码之家 › 专栏 › 技术社区 › devAR

单击其他组件时,单选按钮未保持选中状态

vuejs3 vue.js

devAR · 技术社区 · 2 年前

我有这个父组件

问题

<template>
  <div class="question-container">
    <div class="question">
      <h2>{{ number }}. {{ question.question }}</h2>
      <Choice :choices="question.choices"/>
    </div>
  </div>
</template>

<script>
import Choice from "./Choice.vue";

export default {
  name: "Question",
  props: {
    question: String,
    number: Number,
  },
  components: {
    Choice,
  },
};
</script>

这个子组件名为

选择

<template>
  <div class="choice">
    <div v-for="(choice, index) in choices" v-bind:key="index">
      <label>
        <input type="radio" name="answer" />
        <span class="label-text">{{ choice }}</span>
      </label>
    </div>
  </div>
</template>

<script>
export default {
  name: "Choice",
  props: {
    choices: Array,
  },
};
</script>

问题是,当您在一个组件上选择单选按钮时,然后转到另一个组件并尝试在该组件上选择单选按钮时。单选按钮将从其他组件中取消选中。倍数问题渲染组件,每个组件都有单选按钮。当您单击问题组件,则从其他组件中取消选择所有选定的单选按钮。希望我有道理。我该如何解决这个问题?

1 回复 | 直到 2 年前

Djave 2 年前

使用 name= 单选按钮上的属性是HTML用于将其与其他收音机分组以获得相同输入的属性。您需要每个问题都具有唯一性。

这些问题已经有了 number prop(我希望它是某种ID?如果不是,可以为每个属性添加一个ID属性)

我会将此传递给选择:

<Choice :choices="question.choices" :id="number"/>

然后在选项中渲染:

<template>
  <div class="choice">
    <div v-for="(choice, index) in choices" v-bind:key="index">
      <label>
        <input type="radio" :name="`answer-${id}`" />
        <span class="label-text">{{ choice }}</span>
      </label>
    </div>
  </div>
</template>

<script>
export default {
  name: "Choice",
  props: {
    choices: Array,
    id: Number
  },
};
</script>

这将渲染

<input type="radio" name="answer-1" />

推荐文章

StuP · 响应式Vue组件在数据更改时不更新

2 年前

dbzx10299 · 对从Api端点返回的数据使用Vue转换组

2 年前

mrDandaleonx · Vue3获取div内容并将其发布到表单

2 年前

ateymour · Vue3在异步调用后将道具传递给子组件

2 年前

Artur Müller Romanov · 是否可以有条件地渲染布局?

2 年前

Ilijanovic · 对象可能未定义

2 年前

devAR · 单击其他组件时,单选按钮未保持选中状态

2 年前

Coderama · 在v-for指令中使用:key属性时,TS应出现类型错误

2 年前

Suffii · Vue表单输入绑定的条件绑定存在问题

2 年前

akkonrad · 函数的作用是:返回数据属性为空的实例

2 年前