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

Question

Coming from Knockout.js, where you can simply create an observable everywhere by defining it, is there something similar in 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 });

In my Vue.js project, I'm getting a list of objects from the server. For each of those objects, I want to add a computed property that I can use in a v-if binding. How can I achieve that?

Answer 1

I'm not familiar with the way Knockout does it but it sounds like a Vue computed. Create a data object to hold your fetched data:

data() {
  return {
    items: null
  }
}

Imagine fetching it in the created hook (or Vuex, wherever):

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

Create your computed:

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

Here is a demo using this pattern where I'm loading some data and printing out a filtered result from it. Let me know if I misunderstood what you're looking for. (You can see the original fetched data in the console.)