computed 属性 returns 空数组

Question

我在 VueJS 中有一个这样的计算属性：

  computed: {
    groupedTemplates() {
      const ret = this.templates.reduce((acc, value) => {
        value.group = value.group || "Ungrouped";
        if (!acc[value.group]) {
          acc[value.group] = [];
        }
        acc[value.group].push(value);
        return acc;
      }, []);
      console.log(ret);   // <---- This works!!
      return ret;
    },
    ...mapState(["currentPatient", "currentSite", "phrases", "templates"]),
  },

当我查看控制台时，我可以看到正确的响应是 app.js:4061 [Ungrouped: Array(6), Note: Array(2), Order Set: Array(3)]

但是，当我在代码中使用 groupedTemplates 时，它的计算结果为 []

当我将 return 行更改为

return 34;

它 return 如预期的那样是 34。给出了什么？

Answer 1

因为您的 reduce 不会将项目添加到数组中，而是在 Array 对象上创建新的 properties - 您不能 use a string as an index进入数组...

您可能想要的是 return Object 从您的 groupedTemplates 计算...

computed 属性 returns 空数组

computed property returns empty array

computed-properties

vuejs2