Vue.js 卡片中的某些项目没有反应性答案

【问题标题】：Vue.js some items in card are not reactivityVue.js 卡片中的某些项目没有反应性
【发布时间】：2019-04-22 10:54:23
【问题描述】：

我已经为这个问题苦苦挣扎了好几天。我希望有人能帮帮忙我出去。

我有一张结帐卡，我正在尝试更新数量和总价。：

父组件：

<template>
    <div>
        <upsell-checkout-product
                :product="product"
                :index="index"
                @remote="remove"
                @increment="increment"
                @decrement="decrement"
        ></upsell-checkout-product>
    </div>
</template>

<script>
    export default {
        props: {
            runId: {
                type: String,
                default: null
            },
            card: {
                type: Array,
                default: null
            },

            customer: {
                type: Object,
                default: null
            },

            order: {
                type: Object,
                default: null
            }
        },

        data() {
            return {
                localCard: []
            }
        },

        mounted() {
            this.localCard = this.card;
        },

        methods: {
            increment(index) {
                Vue.set(this.localCard[index], 'quantity', this.localCard[index].quantity+=1);
            },

            decrement(index) {
                if(this.localCard[index].quantity > 0) {
                    this.localCard[index].quantity--;
                }
            },

            remove(index) {
                this.localCard.splice(index, 1);
            }
        }
    }
</script>

子组件：

   <template>
        <div class="text-green">
            <div class="flex center p-2">
                <div class="w-1/3">
                    <img class="rounded-full h-24 w-24 border border-green"
                         :src="'/storage/articles/' + product.article.image_url"
                         v-if="product.article.image_url"
                    />
                </div>

                <div class="w-2/3">
                    <h3>{{ product.article.name }}</h3>

                    <h5 class="mt-2">Bestaalstatus</h5>

                    <div>
                        <div class="bg-red text-white text-xs mt-2 rounded p-1 w-1/3">
                            Niet voldaan
                        </div>
                    </div>
                </div>
            </div>

            <div class="center justify-between p-2 border-t border-b border-dotted border-green">
                <div class="w-1/5">
                    <div class="cursor-pointer" @click="$emit('remove', index)">
                        x
                    </div>
                </div>

                <div class="center w-2/5">
                    <div class="cursor-pointer" @click="$emit('decrement', index)">
                        -
                    </div>

                    <input type="number"
                           class="input-main w-1/2 ml-1 mr-1 h-8"
                           v-model="product.quantity">

                    <div class="cursor-pointer" @click="$emit('increment', index)">
                        +
                    </div>
                </div>

                <div class="flex justify-end w-2/5">
                    <div v-if="product.article.member_discount_percentage">
                        <p class="text-sm">€ <strike>{{ price }}</strike> - € {{ discountPrice }}</p>
                    </div>

                    <div v-else>
                        <p class="text-sm">€ {{ discountPrice }}</p>
                    </div>
                </div>
            </div>
        </div>
    </template>

    <script>
        export default {
            props: ['product', 'index'],

            computed: {
                price: function() {
                    return (this.product.quantity * this.product.article.price).toFixed(2);
                },

                discountPrice: function() {
                    return (this.product.quantity * this.product.article.discount_price).toFixed(2);
                }
            }
        }
    </script>

问题是我已经从服务器获取的卡片项目在 localCard 中是反应性的，但是尚未从服务器获取但在结帐过程中添加的项目不是...

我已经尝试制作一个 JsFiddle，但我无法重现该问题。显然这是一个反应性问题，但我不知道我应该如何解决这个问题。

我需要一些帮助，谢谢！

【问题讨论】：

点击这个会更新top的数量吗？对吗？
是的，它会更新数量和价格。
所以index可能有问题
Vue.set 看起来不对 - 不应该是 this.$set 吗？
我认为在remote事件而不是remove监听的代码中要小心

标签： javascript vue.js vue-reactivity

【解决方案1】：

我终于修好了！

当我将新项目推送到数组并执行以下操作时：

.push(Object.assign({}, article));

它突然起作用了！感谢您的帮助。

【讨论】：

为了让其他可能偶然发现您遇到类似问题的人清楚 - 您能否扩展您的答案以解释为什么这会有所帮助。根据您最初发布的代码，我看不出这为您解决了问题。
其他想了解这个的可以看vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats
除此之外，您还可以使用 Vue util、Vue.set() 或传播语法 `.push({...article})

【解决方案2】：

我认为问题不在于您向我们展示的代码。

mounted() {
            this.localCard = this.card;
        },

我认为this.card 不是被动的（至少不是针对所有项目），这给您带来了麻烦。你可以通过一个简单的console.log(this.card) 来检查我的假设，在那里你可以看到卡片数组中的所有项目是否都是观察者。

希望这会有所帮助。

【讨论】：