filter 不适合做 SKU 规格拼接显示——它无法响应规格选择状态变化，且不能访问 data 或 computed 中的当前选中值，强行用会导致拼接结果静态、错乱或渲染为空。

直接说结论：filter 不适合做 SKU 规格拼接显示——它无法响应规格选择状态变化，且不能访问 data 或 computed 中的当前选中值，强行用会导致拼接结果静态、错乱或渲染为空。

为什么 {{ sku.specs | joinSpecs }} 会失效

Vue 过滤器是纯函数，只接收模板里传入的值（比如 sku.specs 数组），拿不到当前已选的 selectedValues、也感知不到用户点击动作。常见错误现象：

• joinSpecs 返回空字符串，控制台无报错，但页面上规格文字不显示
• 点选“红色”后，“红色_S”没更新，仍显示旧值甚至不刷新
• 想把“颜色:红色, 尺寸:S”格式化成“红色 · S”，但过滤器收不到 specs 配置数组，无法按顺序映射

真正该用 computed 而不是 filter

SKU 拼接依赖两个动态源：当前选中的 selectedValues 对象（如 {颜色: "红色", 尺寸: "S"}）和原始 specs 维度定义（决定拼接顺序）。必须用 computed 实时组合：

uni-app

uni-app 是基于 Vue 的跨端开发框架，适合开发 H5、App、小程序、鸿蒙和多端业务应用。

下载

• 先确保 specs 是响应式数组，例如 specs: [{name: "颜色"}, {name: "尺寸"}]
• 写一个 computed，遍历 specs，对每个 spec.name 查 selectedValues[spec.name]
• 用 .filter(Boolean) 剔除未选的项，再 .join(" · ")
• 示例：

  computed: {
    displaySpecText() {
      return this.specs
        .map(spec => this.selectedValues[spec.name])
        .filter(val => val != null && val !== "")
        .join(" · ")
    }
  }

如果非要用 filter，只能当「静态格式化工具」

仅限处理后端返回的完整 spec_str 字段（如 "红色_S"），且该字段顺序已与 specs 严格一致。此时可注册一个安全过滤器：

• 必须提前在 main.js 全局注册：

  Vue.filter("formatSpecStr", function(str, specs) {
    if (!str || !specs?.length) return ""
    const values = str.split("_")
    return specs.map((s, i) => values[i] || "").filter(v => v).join(" · ")
  })

• 模板中调用：{{ sku.spec_str | formatSpecStr(specs) }}
• 注意：specs 必须作为第二个参数传入，不能在 filter 内部访问 this；spec_str 若顺序错（如后端返回 "S_红色" 但 specs 是 [{name:"颜色"},{name:"尺寸"}]），结果必然错位

最易被忽略的点：很多人以为 filter 能监听 v-model 变化，其实它连 selectedValues 的引用都拿不到。拼接逻辑一旦脱离 computed 或 watch，就等于放弃响应式控制权。