VueJS & Algolia：ais-refinement-list组件如何自定义筛选项显示名称

错误原因 #

你当前代码报错是语法问题：不允许直接在对象字面量（即map回调中返回的{...}结构）内编写if分支语句，对象内部仅支持定义键值对表达式。

实现方案 #

你有6个筛选分面需要重命名，推荐用映射表的方式实现，后续修改/新增替换规则只需维护映射表即可，代码更易维护：

// 定义所有标签的映射关系，按需补充剩下的5条规则
const labelMapping = {
  'MC': 'Multiple Choice',
  // 其余重命名规则按「原名称: 新名称」的格式写在这里
}

transformItems: function(items) {
  return items.map(item => ({
    ...item,
    label: labelMapping[item.label] ?? item.label
  }));               
},

如果仅需要临时测试少量替换，也可以用三元表达式替代if判断：

transformItems: function(items) {
  return items.map(item => ({
    ...item,
    label: item.label === 'MC' ? 'Multiple Choice' : item.label
  }));               
},

内容的提问来源于stack exchange，提问作者Dominic