Question

我正在学习到期而且我正在尝试一些应该容易但不起作用的事情，并且我确定有一些我不理解的事情。我必须为一个模态添加一个案例......

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

我无法更改值：当我单击按钮时，如果我查看控制台，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

计算对象更新为懒惰，将数组设置为数据属性，然后它将更新被动反应。此外，计算对象默认为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);
          }
       }   
    }
}

Vue.js，点击切换类并没有按预期工作

1 个答案: