Vue.js，点击切换类不按预期工作

Question

我正在学习Due和我正在尝试应该很容易但不起作用的东西，我确定有些事我不明白。 我必须添加一个案例模式...

我简化了代码：我有一个产品从我父母的数组通过道具，并在他们的柱子我使用计算变异。 在计算的变量中，我还向我的对象数组添加了一个对每个对象都有效的属性，并且我需要使用该属性来添加该类。

我无法更改该值：当我单击该按钮时，如果我查看控制台但在我的模板中，则值改变product.active否，它是错误的。为什么

<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

计算对象更新懒惰，将数组设置为数据属性，然后它会更新反应。 此外，计算对象默认情况下是只有getter-only的。

你最好触发填充当组件被安装这样的产品阵列的方法：

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