计算属性返回空数组

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 34;

它按预期返回 34。什么给了？

Answer 1

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

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