Issue with vue.js conditional rending

0
votes

I have problem in rendering a template

When a new data has been added, it won't go to the process of v-if even if the condition is both TRUE.

Can some please explain why?

I have provided some screenshot below to explain further my issue

enter image description here

This first image was my template for displaying the products, you will notice the add, update and remove in here.

enter image description here

The second image shows that I'm trying to add a new product

enter image description here

The third image shows that I have successfully added the new product. The problem is, the action button "update" is triggered but won't take any effect.

enter image description here

The image above shows that the update button works with the past data, but not with the new one.

enter image description here

This last image will prove that the button has been triggered. I've added a console.log to display the following upon clicking the update button.

  1. INDEX of the row, which is [0].
  2. The typeOf the variable 'isUpdate' [boolean].
  3. The value of 'isUpdate' [True, False]
  4. and the productID which is [151]

Any idea why it hasn't been triggered, or any idea how to debugged this?

If you want to see the code. I can provide it, just tell me which part are you looking for. As I don't have any idea which part has the error.

Thank you in advance.

Updated

AS per Amresh Venugopal Request

Here is the v-if in the template

<tr v-if='product.id > 0 && product.isUpdate' class='table-inputs'>

And the updatebtn function

canUpdate: function(data) {
            console.log(data.pindex);
            this.products[data.pindex].isUpdate = !this.products[data.pindex].isUpdate;
            console.log(typeof this.products[data.pindex].isUpdate);
            console.log(this.products[data.pindex].isUpdate);
            console.log(this.products[data.pindex].id);
        }

I only set the isUpdate value to 'true' if 'false', and viceversa.

The productID is added after the ajax save function.

1
vue.jsconditional-rendering
You may need to provide a jsfiddle/codepen to produce the problem – CodinCat
The template with v-if and update function would be required. – Amresh Venugopal
I'm not sure if i'll be able to recreate it in one fiddle page as this problem has 2 components. Any other suggestion? – Emman
what kind of a property is this.products? data or computed ? – Amresh Venugopal
It was added in Data, actually the canUpdate func was in the child component so this.products has been passed using props – Emman

1 Answers

0
votes

I figure it out!

When I push the data in this.products, I didn't include the 'isUpdate' field.

Got it working now.