Troubleshooting: Why isn't my Vue v-for list updating when using v

Question

Troubleshooting: Why isn't my Vue v-for list updating when using v

I have a basic application that retrieves data from an API and displays the array on the screen using a v-for loop.

The array is structured like this

items : [{id : 1, quantity: 2}, {id: 2, quantity: 3} ...]

The loop is set up like this

<div v-for="item in items" :key = "item.id">
    <p>{{ item.name}} </p>
    <button @click="updateQuantity(item.id)">Update Quantity</button>
</div>

I am attempting to change the quantity when a button is clicked, I'm using this function but even though the quantity is being updated, the updated value is not reflecting in the displayed quantity.

updateQuantity(id) {
    // send a request to the API backend
    this.$set(items[id], 'quantity', newQuantity)
    console.log(this.items)
}

Even though the quantity is updated, the new value is not displayed on the page with the v-for loop, what could be the issue and how can I solve it?

javascript vue.js

Answer 1

Answer №1

It seems like your problem has a simpler solution that I overlooked:
Instead of using post.id as the array index, you should iterate through the array using

v-for="(post, idx) in posts"

and trigger the like function using @click="like(idx)".

NOTE: The response below was written before fully understanding the issue, and is irrelevant to the problem at hand. However, the information may still be helpful.

When using v-for with an array of objects, I prefer passing the entire object to the event handler rather than the index. This way, the object is passed by reference, making the code more concise and easier to read.

Although this approach may not be the most performance-efficient for thousands of components, it can be a more streamlined coding solution.

<template>
  <div v-for="post in posts" :key="`${_uid}_${post.id}`">
    <p>{{ post.title }}</p>
    <button @click="onClickLike(post)">Like</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      posts: []
    }
  },
  async mounted () {
    this.posts = await fetch('https://api.web.site/v2/posts')
  },
  methods: {
    onClickLike (post) {
      post.like++
    }
  }
}
</script>

Alternatively, you would need to use .filter to find the post in the array based on post.id before updating it within the @click handler.

Answer 2

It seems like your problem has a simpler solution that I overlooked:
Instead of using post.id as the array index, you should iterate through the array using

v-for="(post, idx) in posts"

and trigger the like function using @click="like(idx)".

NOTE: The response below was written before fully understanding the issue, and is irrelevant to the problem at hand. However, the information may still be helpful.

When using v-for with an array of objects, I prefer passing the entire object to the event handler rather than the index. This way, the object is passed by reference, making the code more concise and easier to read.

Although this approach may not be the most performance-efficient for thousands of components, it can be a more streamlined coding solution.

<template>
  <div v-for="post in posts" :key="`${_uid}_${post.id}`">
    <p>{{ post.title }}</p>
    <button @click="onClickLike(post)">Like</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      posts: []
    }
  },
  async mounted () {
    this.posts = await fetch('https://api.web.site/v2/posts')
  },
  methods: {
    onClickLike (post) {
      post.like++
    }
  }
}
</script>

Alternatively, you would need to use .filter to find the post in the array based on post.id before updating it within the @click handler.

Troubleshooting: Why isn't my Vue v-for list updating when using v

Answer №1

Similar questions

I am looking to showcase images beside individuals' names or photos on my website in a vertical arrangement, similar to how it is done on Facebook

|Webview|Best Practices for Integrating Upload Script

Dynamically assigning a name to a variable through code

What is the method for retrieving JSON data within the AngularJS repeat directive?

When using node.js with express, the req.on('end') event is triggered, but the req.on('data') event does not fire

What could be causing my function to fail <object>?

Determine the date and time based on the number of days passed

Enhancing React Native experience by dynamically editing array elements

Accessing class fields from within an annotation in Typescript

Launching the forEach function within an ng-repeat loop was it can be done by

Is there a way to retrieve the current logged in user when working with socket.io?

The jQuery prop("disabled") function is not operating as expected

What steps are involved in creating a default toolbar for a material picker in a React application?

Utilizing AJAX with FullCalendar to seamlessly insert Bootstrap modal inputs into an SQL table

Adjust the scope variable upon submission and refresh the display in AngularJS

How do I incorporate scrolling into Material-UI Tabs?

Retrieving historical data from a MySQL database to display in a div element

Steps for integrating a valid SSL certificate into a Reactjs application

The value of Vue.js props appears as undefined

The socket.io.js file could not be located while using (nodejs with express [4.13] and socket.io [1.3])