Javascript Vue.js，单击时切换类'；I don’我没有按预期工作

我正在学习，我正在尝试一些应该容易但不起作用的东西，我确信有些东西我不明白。 我必须在模态中添加一个案例

我简化了代码：我有一个来自我父母的产品数组，通过a道具，并使用计算变量将它们分块到列中。 在计算变量中，我还为每个对象向对象数组添加了一个活动属性，我需要使用该属性来添加类

我无法更改该值：当我单击按钮时，如果我查看控制台，则

product.active

值会更改，但在我的模板“否”中，该值为false。为什么

 <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>

{{product.active}}
昂贵的历史
从“../components/PriceHistory”导入PriceHistory
导出默认值{
道具：[‘结果’、‘搜索’、‘最高价格’、‘折扣’]，
名称：'产品'，
组成部分：{
价格历史
},
方法：{
活动模式：功能（产品）{
console.log（product.active）；
product.active=！product.active；
console.log（product.active）；
}
},
计算：{
加工产品（）{
让products=this.results.map（（obj）=>{
obj.active=false；
返回obj；
})
//将数组放入块中
设i，j，chunkedArray=[]，chunk=5；
对于（i=0，j=0；i

计算对象更新为惰性，将数组设置为数据属性，然后它将更新。 此外，默认情况下，计算对象仅为getter

您最好触发一个方法，在安装组件时填充产品阵列，如下所示：

导出默认值{
道具：[‘结果’、‘搜索’、‘最高价格’、‘折扣’]，
名称：'产品'，
组成部分：{
价格历史
},
数据：函数（）{
返回{
产品：[]
}
},
挂载：函数（）{
这个.processedProducts（）；
},
方法：{
活动模式：功能（产品）{
console.log（product.active）；
product.active=！product.active；
console.log（product.active）；
},
加工产品（）{
让products=this.results.map（（obj）=>{
obj.active=false；
返回obj；
})
//将数组放入块中
设i，j，chunk=5；
对于（i=0，j=0；i

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