Vue双大括号模板无法渲染动态拼接的对象嵌套属性值问题求解

解决方案 #

1. 错误原因 #

你写法2的问题是将item.properties对象和字符串做了+拼接操作，JS会自动将对象转成[object Object]字符串，才会得到异常输出结果，不需要额外遍历或过滤操作，直接用JS对象的方括号动态取值语法即可解决。

2. 直接取值的正确写法 #

先从label中提取出要访问的属性名，再通过方括号读取对应属性：

// 先处理属性名
const propName = label.replace('filters.', '')
// 模板中取值写法
{{ item.properties[propName] }}

3. 适配Vuetify Autocomplete的最优方案 #

Vuetify Autocomplete的item-text属性支持传入函数，可直接动态返回每个条目要展示的内容，不需要提前修改源数组：

<v-autocomplete
  :items="data"
  :item-text="(item) => {
    const propName = label.replace('filters.', '')
    return item.properties[propName]
  }"
  <!-- 其余你的自定义配置 -->
/>

4. 预处理items数组的方案（可选） #

如果你需要提前处理数据源，可通过计算属性生成适配的列表，性能更好也更易维护：

// 组件计算属性
computed: {
  processedItems() {
    const propName = this.label.replace('filters.', '')
    return this.data.map(item => ({
      ...item,
      displayText: item.properties[propName]
    }))
  }
}

模板中绑定使用即可：

<v-autocomplete
  :items="processedItems"
  item-text="displayText"
  <!-- 其余你的自定义配置 -->
/>

补充说明 #

你之前尝试的filter写法不可行，因为filter是数组专属方法，item.properties是对象类型，直接调用会抛出类型错误，不需要做这一步操作。

内容的提问来源于stack exchange，提问作者Jérôme BORGA