Question

我正在传递products作为对此组件的支持。然后，我将为这些道具设置数据值，因为我将向其推销产品。
在我的模板中，我使用的是计算属性productsToShow，因为如果传递了道具hideSoldOutProducts，它们就会被过滤掉。

我的问题是：我为productsData设置了一个数据值，因为在页面底部，它们将是一个API调用，用于将更多产品推入productsData数组。因此，尽管添加了productsData，但是使用productsToShow()的计算属性productsData却没有反映出来。

<template>
    <div v-for="(product, index) in productsToShow">
      .....
    </div>
</template>

data() {
    return {
        productsData:       Vue.util.extend([], this.products.data)
    }
},
props: {
    products:            {type: Object},
    hideSoldOutProducts: {type: Boolean}
},
computed: {
    productsToShow() {
        if (!this.products.data) {
            return []
        }

        if (this.hideSoldOutProducts) {
            let filteredList = this.productsData.filter(x => x.product.inventory_quantity.quantity > 1)
            return filteredList
        } else {
            return this.productsData
        }
    }
}

Answer 1

感觉似乎有更好的方法，因为这看起来很复杂。但是也许反应性不起作用，因为仅在装载时设置了数据。您可以在媒体资源上设置观察者，然后在更改时将新的媒体资源数据绑定到productsData。

但是，我感觉这可能是创建将产品推入数据数组的addProduct方法的更好方法。像这样的东西。

watcher: {
    products(value) {
        value.data.forEach(this.addProduct);
    }
},
methods: {
    addProduct(product) {
       // here you could also check if the product already exists in your 
       // productsData
       this.productsData.unshift(product);
    },
    fetchProducts() {
        this.$http.get('/api/products')
                  .then(resp => {
                      // Now we can loop through and add the products.
                      resp.data.forEach(this.addProduct);
                  });
    }
}

我希望这会有所帮助。

Vue：计算属性是否监视内部数据更改？

1 个答案: