Updating values dynamically using AJAX within a v-for loop

Question

Updating values dynamically using AJAX within a v-for loop

I'm struggling to figure out how to change the value of an attribute in a v-for loop.

For instance, I would like the index to be used as the name of the related product:

HTML

<div v-for="(index, publication) in publications">
  {{ index | name publication.productId }}
</div>

JS

 filters: {
      name: function(val, productId) {
        this.$http.get('/api/product/'+productId)
          .then(function(rst) {
          return rst.data.name;
        }).catch(function(err) {
          console.error(err);
        });
      }
    },

The request successfully returns the name, but it doesn't seem to appear in the HTML template. I suspect this is because the filter is synchronous.

If anyone has a solution, I'd greatly appreciate hearing about it!

javascript ajax http vue.js

Answer 1

Answer №1

Using a computed property might not be the best approach for your situation. Consider utilizing a real data item and updating it within a watch of publications. Here's an example:

data: {
  ...
  productData: []
},
watch: {
  publications: function (newValue) {
    this.productData = [];

    this.publications.forEach((pub, i) => {
      this.$http.get('/api/product/'+pub.productId)
      .then((rst) => {
        this.productData[i] = rst.data.name;
      }
    });
  }
}

You can then use a v-for directive like this:

<div v-for="name in productData">
  {{ name }}
</div>

Answer 2

Using a computed property might not be the best approach for your situation. Consider utilizing a real data item and updating it within a watch of publications. Here's an example:

data: {
  ...
  productData: []
},
watch: {
  publications: function (newValue) {
    this.productData = [];

    this.publications.forEach((pub, i) => {
      this.$http.get('/api/product/'+pub.productId)
      .then((rst) => {
        this.productData[i] = rst.data.name;
      }
    });
  }
}

You can then use a v-for directive like this:

<div v-for="name in productData">
  {{ name }}
</div>

Updating values dynamically using AJAX within a v-for loop

Answer №1

Similar questions

Upon clicking, Vue triggers form validation in Laravel

Managing the response from a dataless AJAX GET request

Pass information from the child component to the parent component using Vue.js

What is the best way to prevent the body from scrolling when scrolling on a fixed div without making the body's scroll bar disappear?

What are the best practices for implementing Laravel and Vue together?

What steps can I take to prevent receiving a 400 (Bad Request) error when using ajax PUT

"Experience the power of utilizing TypeScript with the seamless compatibility provided by the

Encountered an error: data.map is not functioning as expected in the React component

Animating overlapping div elements using jQuery

Creating an iterable type in TypeScript with key-value pairs - a beginner's guide

Uploading Files within Angular FormArray

Tips for choosing between options in JavaScript and AngularJS

Prevent the mouseup event in jQuery when the mouse has previously been moved

"Is there a way to ensure that jPlayer plays the same song even after a page refresh

Uniting the graphical user interface with the server side operations

Modify the Primevue Class p-accordion-header only under certain conditions

Tips for accessing the value from an input field in an AngularJS application

Pull data from one array of objects using the id from another array to display in a list using AngularJS ng-repeat

What method is best for deleting an item from the database in HTML structure - POST, GET, or XHR action?

Struggling to implement my reusable React component within a React Bootstrap modal