Incorporate a Vue.js computed property into the data retrieved from a server

Question

Incorporate a Vue.js computed property into the data retrieved from a server

Coming from Knockout.js, where observables are easily created by defining them, I'm curious if there's a similar approach 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 current Vue.js project, I am fetching a list of objects from the server. For each object in the list, I need to add a computed property that can be used in a v-if binding. How can I go about achieving this in Vue.js?

javascript vue.js knockout.js vuejs2 async-await

Answer 1

Answer №1

The method used by Knockout is not familiar to me, but it seems similar to a Vue computed property. To implement this in Vue, start by creating a data object to store the fetched data:

data() {
  return {
    items: null
  }
}

Assuming you fetch the data in the created hook (or through Vuex):

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

Next, define your computed property:

computed: {
  itemsFormatted() {
    if (!this.items) return null;
    return this.items.map(item => {
      // Perform operations on each item here
    });
  }
}

Check out this demo that demonstrates using this approach to load and filter data. Feel free to let me know if this wasn't what you were looking for. (The original fetched data can be viewed in the console.)

Answer 2

The method used by Knockout is not familiar to me, but it seems similar to a Vue computed property. To implement this in Vue, start by creating a data object to store the fetched data:

data() {
  return {
    items: null
  }
}

Assuming you fetch the data in the created hook (or through Vuex):

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

Next, define your computed property:

computed: {
  itemsFormatted() {
    if (!this.items) return null;
    return this.items.map(item => {
      // Perform operations on each item here
    });
  }
}

Check out this demo that demonstrates using this approach to load and filter data. Feel free to let me know if this wasn't what you were looking for. (The original fetched data can be viewed in the console.)

Incorporate a Vue.js computed property into the data retrieved from a server

Answer №1

Similar questions

Can you import folders containing *.vue files in your project?

Clicking outside of a focused div does not trigger a jQuery function

unable to retrieve the value of this.table property within a JavaScript class

I have a quick question: What is the most effective method for creating PDF templates with Angular and .NET 6, specifically for designs that feature heavy

Obtain image file paths dynamically in a folder using Nuxt

Filtering data from MongoDB within the controller logic

Are you experiencing difficulty loading ng-view in AngularJs?

Tips for interacting with a custom web component using Selenium WebDriver

A comparison between the Composition API and traditional Plain JavaScript syntax

Showing information in a table on a webpage using JavaScript and HTML

The Json parsing failed to deserialize the API response

Error: Syntax mishap detected - Oh dear

Ordering an Array of JavaScript Objects in a Custom Sequence (utilizing pre-existing methods)

The sticky element should only be active when the visible section is overflowing vertically. There should be no scrollbar if the height is minimal

What is the best way to save JavaScript array information in a database?

utilizing the .on method for dynamically inserted elements

From HTML to Python to Serial with WebIOPi

Mapping an HTTP object to a model

JQuery animations not functioning as expected

Ensure that you patiently wait for the axios method to finish execution before moving on to the