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

Question

来自 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 绑定中使用的计算属性。我怎样才能做到这一点？

Answer 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，我在其中加载一些数据并从中打印出过滤结果。如果我误解了你要找的东西，请告诉我。（您可以在控制台看到原始的抓取数据。）

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

Add Vue.js computed property to data gathered from a server

javascript

vue.js

knockout.js

vuejs2

async-await

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

Add Vue.js computed property to data gathered from a server

javascript

vue.js

knockout.js

vuejs2

async-await

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