[Vuejs]-Vue.js, toggle class on click doesn't work as expected

by

0👍

✅

Computed objects update lazy, set the array as a data property then it will update reactive.
Furthermore computed-objects are by default getter-only.

You better trigger a method that fills the product array when the component is mounted like this:

    export default {
      props: ['results','search','maxprice','discount'],
      name: 'product',
      components: {
        PriceHistory
      },
        data: function () {
        return { 
         products :[]
       }
      },
      mounted: function(){
    this.processedProducts();
    },
      methods: {
        activeteModal: function(product){
          console.log(product.active);
          product.active = !product.active;
          console.log(product.active);
        },
        processedProducts() {
          let products = this.results.map((obj) => {
              obj.active = false;
              return obj;
          })

          // Put Array into Chunks
          let i, j,  chunk = 5;
          for (i=0, j=0; i < products.length; i += chunk, j++) {
            this.products[j] = products.slice(i,i+chunk);
          }
       }   
    }
}

Leave a comment