Vue.js，点击切换 class 未按预期工作

Question

我正在学习 Due，我正在尝试一些应该很容易但行不通的东西，我确信有些东西我不明白。我必须向模态添加案例...

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

我无法更改该值：当我单击按钮时，如果我查看控制台，但在我的模板中，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。

你最好在组件挂载时触发一个填充产品数组的方法，如下所示：

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

Vue.js，点击切换 class 未按预期工作

Vue.js, toggle class on click doesn't work as expected

javascript

vue.js