Vue.js，點擊時切換類無法正常工作

Question

我正在學習Due，並且正在嘗試一些應該很容易但不起作用的事情，並且我確定有些事情我不理解。 我必須在情態中添加一個案例...

我簡化了代碼：我有一個由我的父母傳遞來的道具組成的產品數組，並使用計算的可變性將它們分塊。 在計算的變量中，我還將對每個對象都有效的屬性添加到對象數組中，並且需要使用該屬性來添加類。

我無法更改該值：單擊按鈕時，如果我查看控制台， 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>

Answer 1

計算對象會延遲更新，將數組設置為數據屬性，然后它將更新反應性。 此外，默認情況下，計算對象僅是吸氣劑。

最好像這樣安裝組件時觸發填充產品數組的方法：

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