将 Vue.js 计算属性添加到从服务器收集的数据中

【问题标题】：Add Vue.js computed property to data gathered from a server将 Vue.js 计算属性添加到从服务器收集的数据中
【发布时间】：2020-04-06 19:59:11
【问题描述】：

来自 Knockout.js，你可以通过定义它来简单地在任何地方创建一个 observable，在 Vue.js 中是否有类似的东西？

let vm = {
    someOtherVar: ko.observable(7),
    entries: ko.observableArray()
};

function addServerDataToEntries(data) {
    data.myComputed = ko.pureComputed(() => vm.someOtherVar() + data.bla);
    vm.entries.push(data);
}

addServerDataToEntries({ bla: 1 });

在我的 Vue.js 项目中，我从服务器获取对象列表。对于这些对象中的每一个，我想添加一个可以在v-if 绑定中使用的计算属性。我怎样才能做到这一点？

【问题讨论】：

标签： javascript vue.js knockout.js vuejs2 async-await

【解决方案1】：

我不熟悉 Knockout 的做法，但它听起来像是 Vue 计算的。创建一个数据对象来保存您获取的数据：

data() {
  return {
    items: null
  }
}

想象一下在 created 钩子（或 Vuex，任何地方）中获取它：

async created() {
  const response = await axios.get(...);
  this.items = response.data;
}

创建您的计算：

computed: {
  itemsFormatted() {
    if (!this.items) return null;
    return this.items.map(item => {
      // Do whatever you want with the items
    });
  }
}

这是一个 demo 使用此模式，我正在加载一些数据并从中打印出过滤结果。如果我误解了您要查找的内容，请告诉我。（您可以在控制台中看到原始获取的数据。）

【讨论】：