When trying to extract information from a v-for loop and pass it into a method, I keep

Question

When trying to extract information from a v-for loop and pass it into a method, I keep

After sending an array of data objects into a child component via props, I proceeded to use a v-for loop to display the elements exactly how I intended:

 <div class="col-md-3" v-for="product in products" :key="product.id" v-if="product.id <= 8" >
    <div>{{ product.name }}</div>
    <button @click="buyProduct">
</div>

Following that, I implemented this method:

 buyProduct(){
      console.log('bought');
      const order = {
        orderId: this.product.id,
        orderName: this.product.productName,
        orderImg: this.produc.image,
        orderOriginalPrice: this.product.originalPrice,
        orderdiscountPrice: this.products.discountPrice,
        orderQuantity: this.quantity, 
        
      };
        console.log(this.products);
    }

However, I encountered an error in the console stating: "TypeError: Cannot read property 'id' of undefined"

Any suggestions or solutions on how to retrieve the values of the clicked products would be greatly appreciated.

javascript vue.js vuejs2 vue-component

Answer 1

Answer №1

It seems that the error is occurring in this particular line of code: orderId: this.product.id,

Chances are, you have not initialized this.product. A better approach would be to pass the clicked product as a parameter to your buyProduct method:

<button @click="buyProduct(product)">buy me</button>

and

buyProduct(product) {
    ...
    orderId: product.id
    ...
}

It's not recommended to mix v-for and v-if in the template. Instead, consider using a computed property if you need to further filter the passed products:

computed: {
   filteredProducts() {
       return this.products.filter(p => p.id <= 8)
   }
}

Then you can use

v-for="product in filteredProducts"

Answer 2

It seems that the error is occurring in this particular line of code: orderId: this.product.id,

Chances are, you have not initialized this.product. A better approach would be to pass the clicked product as a parameter to your buyProduct method:

<button @click="buyProduct(product)">buy me</button>

and

buyProduct(product) {
    ...
    orderId: product.id
    ...
}

It's not recommended to mix v-for and v-if in the template. Instead, consider using a computed property if you need to further filter the passed products:

computed: {
   filteredProducts() {
       return this.products.filter(p => p.id <= 8)
   }
}

Then you can use

v-for="product in filteredProducts"

When trying to extract information from a v-for loop and pass it into a method, I keep

Answer №1

Similar questions

Vue JS Image Path

Loading objects with textures in Three.js using the objloader

Retrieve information using an AJAX call

What is the best way to attach a CSS class to a button in Vue by using the "or" condition

A guide on selectively removing a value from a javascript object when calling setState in ReactJS

Troubleshooting inactive CSS hover animation

Implementing a Search Box feature in React-leaflet version 3.1.0

Unknown custom element error in Laravel and Vuetify

Sorting through JSON information based on specific attributes and criteria

NodeJs: Dealing with package vulnerabilities stemming from dependent npm packages - Tips for resolving the issue

Using a template element for looping over an array with conditional rendering

What is the best method for streaming files from Java to the browser while preventing the user from downloading and saving the file?

Gaining access to the isolated scope of a sibling through the same Angular directive led to a valuable discovery

At times, the Angular Modal Dropdown may unexpectedly open in an upward direction

Attempting to organize date and time down to the second

Exploring the possibilities of querying Firestore data with dynamic user input

The request for JSON parsing encountered a failed attempt, resulting in an error while trying to parse the JSON

"Exploring the World Wide Web with JavaScript and Ajax in Internet

Ensuring the validation of multiple ValidationObservers in Vue

Vue unit testing for reactive state functions