Vue.js，点击时切换类无法正常工作

Question

I'm learning Due and I'm trying something that should be easy but doesn't work and I'm sure there is something I don't understand. I have to add a case to a modal...

I simplify the code: I have an array of products from my parent passed the a props and to chunk them in columns I use a computed variabile. In the computed variable I also add to my object array an attribute active for every object, and I need to use that attribute to add the class.

I cannot change the value: when I click the button the product.active value is changed if I look the console but in my template no, it is false. Why

 <template>
  <div class="columns" v-for="products in processedProducts">
   <div class="column" v-for="product in products">
    <pre>{{product.active}}</pre>
    <a v-on:click="activeteModal(product)">Pricy History</a>
    <price-history :asin="product.asin" :active="product.active"></price-history>  
   </div> 
  </div>       
 </template>

<script>

import PriceHistory from '../components/PriceHistory'

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

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

Answer 1

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);
          }
       }   
    }
}