如何让radio group的Area of Focus选项仅显示一次而非重复出现？

你遇到的问题是因为从tools数组提取分类值时没有去重，导致每个数据库条目对应的选项重复渲染。只需要在提取数据时添加去重逻辑即可解决：

修改created钩子中的代码 #

目前你只对提取后的值做了排序，缺少去重步骤，替换成以下两种方式之一即可：

方法1：使用Set快速去重（推荐）

利用ES6的Set自动去重特性，将提取后的数组转换为Set再转回数组，最后排序：

created() {
  this.areaOfFocuses = [...new Set(this.tools.map(t => t.attributes.contentAreaOfFocus))].sort();
  this.resourceTypes = [...new Set(this.tools.map(t => t.attributes.contentResourceType))].sort();
  this.resourceFormats = [...new Set(this.tools.map(t => t.attributes.contentResourceFormat))].sort();
  this.filteredTools = this.tools;
}

方法2：使用filter手动去重

适合需要自定义去重逻辑的场景，通过判断元素首次出现的索引来过滤重复项：

created() {
  this.areaOfFocuses = this.tools
    .map(t => t.attributes.contentAreaOfFocus)
    .filter((item, index, arr) => arr.indexOf(item) === index)
    .sort();
    
  this.resourceTypes = this.tools
    .map(t => t.attributes.contentResourceType)
    .filter((item, index, arr) => arr.indexOf(item) === index)
    .sort();
    
  this.resourceFormats = this.tools
    .map(t => t.attributes.contentResourceFormat)
    .filter((item, index, arr) => arr.indexOf(item) === index)
    .sort();
    
  this.filteredTools = this.tools;
}

模板部分无需修改 #

你的单选组模板代码本身没有问题，去重后areaOfFocuses数组中每个值唯一，v-for会正确渲染每个选项一次。

内容的提问来源于stack exchange，提问作者M. Straw