如何让Vue正确地动态更新数据？

Question

下面的组件允许用户查看产品的宏观营养素信息，然后还可以修改服务大小，从而更新宏观营养素的量。

我遇到的问题是，即使使用vue集，我也无法正确更新这些值。

我正在使用一个监视器来运行calcNewNutriValues函数。

<template>
    <div class="product">
        <div class="topbar">
            <div class="left">
                <p class="left__name">{{ product.name }}</p>
                <p class="left__energy">{{ product.energy }}</p>
            </div>
            <div class="right">
                <button class="cancel" @click="removeItem">
                    <inline-svg
                        :src="require('../assets/svg/addition-icon.svg')"
                    ></inline-svg>
                </button>
            </div>
        </div>
        <div class="details">
            <div class="macros">
                <p class="details__heading">Macros</p>
                <div class="macros__container container">
                    <div class="wrapper" v-for="(macro, name, index) in product.macros" :key="index">
                        <p>{{ name }}</p>
                        <p>{{ product.macros[name] }}</p>
                    </div>
                </div>
            </div>
            <div class="serving">
                <p class="details__heading">Serving Size (g)</p>
                <input type="number" placeholder="40" v-model.number="productServSize">
            </div>
        </div>
    </div>
</template>

export default {
    data () {
        return {
            productServSize: 0,
            ogServSize: 0,
            macros: {
                protein: '',
                carbs: '',
                fats: '',
                fibre: ''
            },
            micros: {},
            energy: ''
        }
    },

    props: [
        'product',
    ],

    methods: {
        serving () {
            const num = this.product.servingSize.split(' ')[0]
            this.productServSize = parseFloat(num)
            this.ogServSize = parseFloat(num)
        },

        removeItem () {
            this.$emit('removeProduct', this.product)
        },

        calcNewNutriValues () {
            Object.keys(this.product.macros).forEach(key => {
                let num = parseFloat(this.product.macros[key].split(' ')[0])
                let perGram = parseFloat(num / this.ogServSize)
                let newTotal = `${(perGram * this.productServSize).toFixed(1)} g`
                this.$set(this.macros, key, newTotal)
            })
        }
    },

    mounted () {
        this.serving()
        Object.assign(this.macros, this.product.macros)
        this.energy = this.product.energy
    },

    watch: {
        productServSize: {
            handler () {
                this.calcNewNutriValues()
                this.$emit('updatedNutriValues', this.product)
            }
        }
    }
}

Answer 1

只是看起来macros没有更新，因为您的模板显示的是product.macros而不是macros

<div class="wrapper" v-for="(macro, name, index) in product.macros" :key="index"> 
  <p>{{ name }}</p>
  <!-- <p>{{ product.macros[name] }}</p>  DON'T DO THIS -->
  <p>{{ macros[name] }}</p>
</div>

demo