访问子组件数据时出现问题

Question

我在尝试访问子组件的数据时一定是做错了什么。

我有两组数据：目标和比较器。它们可以通过用户的输入进行更新。 Computed props 更新子组件的数据，然后我想向父组件发出一个事件，这要感谢我在这两组数据上放置的观察者。但是，这些观察者似乎永远不会被触发..

子组件的脚本是这样的（注意，我只粘贴了两个计算的道具）：

<script>
    export default {
        name: "Targets",
        props: ['mealPlan'],
        data() {
            return {
                targets:{
                    weight: 0,
                    calories: 0,
                    carbs: 0,
                    proteins: 0,
                    fats: 0,
                    sugar: 0,
                    fibers: 0,
                    cholesterol: 0,
                    calcium: 0,
                    iron: 0,
                    sodium: 0,
                    potassium: 0,
                    cost: 0,
                    vitaminA: 0,
                    vitaminB6: 0,
                    vitaminB12: 0,
                    vitaminC: 0,
                    vitaminD: 0,
                    vitaminE: 0,
                    vitaminK: 0
                },
                comparators:{
                    weight: 0,
                    calories: 0,
                    carbs: 0,
                    proteins: 0,
                    fats: 0,
                    sugar: 0,
                    fibers: 0,
                    cholesterol: 0,
                    calcium: 0,
                    iron: 0,
                    sodium: 0,
                    potassium: 0,
                    cost: 0,
                    vitaminA: 0,
                    vitaminB6: 0,
                    vitaminB12: 0,
                    vitaminC: 0,
                    vitaminD: 0,
                    vitaminE: 0,
                    vitaminK: 0
                }
            }
        },
        computed:{
            weightTarget:{
                get:function(){
                    this.targets.weight = this.mealPlan.targetWeight;
                    return this.mealPlan.targetWeight;
                },
                set:function(newValue){
                    this.targets.weight = newValue
                }
            },


            weightComparator:{
                get:function(){
                    this.comparators.weight = this.mealPlan.comparatorWeight;
                    return this.mealPlan.comparatorWeight;
                },
                set:function(newValue){
                    this.comparators.weight = newValue
                }
            },

        },
        watch:{
            targets:function(){
                console.log(this.targets);
                this.$emit('targetsUpdated', this.targets);
            },
            comparators:function(){
                this.$emit('comparatorsUpdated', this.comparators);
            }
        }
    }
</script>

父组件接收这样的事件：

<template>
    <div>
        <button @click="save" type="button" class="btn btn-success pull-left">Save</button>

        <div>

                <b-tab title="Targets">
                    <Targets
                    :meal-plan="mealPlan"
                    @targetsUpdated="targetsUpdated"
                    @comparatorsUpdated="comparatorsUpdated"
                    ></Targets>
                </b-tab>
        </div>
    </div>
</template>

<script>
    import MealTable from "../components/MealTable";
    import DayTable from "../components/DayTable";
    import Targets from "./Targets";
    import Specifications from "./Specifications";

    export default {
        name: "Edit",
        components: {DayTable, MealTable,Targets,Specifications},
        data(){
            return{
                mealPlan: {},
                currentDay: '1',
                targets:{},
                comparators:{},
            }
        },

        computed: {

        methods:{
            targetsUpdated(newTargets){
                this.targets = {
                    weight: newTargets.targetWeight,
                    calories: newTargets.targetCalories,
                    carbs: newTargets.targetCarbs,
                    proteins: newTargets.targetProteins,
                    fats: newTargets.targetFats,
                    sugar: newTargets.targetSugar,
                    fibers: newTargets.targetFibers,
                    cholesterol: newTargets.targetCholesterol,
                    calcium: newTargets.targetCalcium,
                    iron: newTargets.targetIron,
                    sodium: newTargets.targetSodium,
                    potassium: newTargets.targetPotassium,
                    cost: newTargets.targetCost,
                    vitaminA: newTargets.targetVitaminA,
                    vitaminB6: newTargets.targetVitaminB6,
                    vitaminB12: newTargets.targetVitaminB12,
                    vitaminC: newTargets.targetVitaminC,
                    vitaminD: newTargets.targetVitaminD,
                    vitaminE: newTargets.targetVitaminE,
                    vitaminK: newTargets.targetVitaminK
                }
            },
            comparatorsUpdated(newComparators){
                this.comparators = {
                    weight: newComparators.comparatorWeight,
                    calories: newComparators.comparatorCalories,
                    carbs: newComparators.comparatorCarbs,
                    proteins: newComparators.comparatorProteins,
                    fats: newComparators.comparatorFats,
                    sugar: newComparators.comparatorSugar,
                    fibers: newComparators.comparatorFibers,
                    cholesterol: newComparators.comparatorCholesterol,
                    calcium: newComparators.comparatorCalcium,
                    iron: newComparators.comparatorIron,
                    sodium: newComparators.comparatorSodium,
                    potassium: newComparators.comparatorPotassium,
                    cost: newComparators.comparatorCost,
                    vitaminA: newComparators.comparatorVitaminA,
                    vitaminB6: newComparators.comparatorVitaminB6,
                    vitaminB12: newComparators.comparatorVitaminB12,
                    vitaminC: newComparators.comparatorVitaminC,
                    vitaminD: newComparators.comparatorVitaminD,
                    vitaminE: newComparators.comparatorVitaminE,
                    vitaminK: newComparators.comparatorVitaminK
                }
            }
        }
    }
</script>

总而言之，我不明白目标或比较器上的观察者没有被触发，谢谢大家的帮助！

Answer 1

因此，当您查看数组或对象时，Vue 不知道您已经更改了该数据中的内容。您必须告诉 Vue，您希望它在观察数据变化时检查数据内部。

您可以通过在观察者上将 deep 设置为 true 并重新排列处理函数来做到这一点。

watch: {
    targets: {
      // This will let Vue know to look inside the object
      deep: true,

      // We have to move our method to a handler field
      handler()
        this.$emit('targetsUpdated', this.targets);
      }
    },
    comparators: {
      // This will let Vue know to look inside the object
      deep: true,

      // We have to move our method to a handler field
      handler()
        this.$emit('comparatorsUpdated', this.comparators);
      }
    }
 }

Answer 2

除了使用观察者之外，还可以简单地将相同的逻辑添加到设置器中：

例如：

       weightComparator:{
            get:function(){
                this.comparators.weight = this.mealPlan.comparatorWeight;
                return this.mealPlan.comparatorWeight;
            },
            set:function(newValue){
                let oldValue = this.comparators.weight
                this.$emit('change:comparators:weight', newValue, oldValue)
                let oldComparators = Object.assign({}, this.comparators) // shallow copy
                this.comparators.weight = newValue
                this.$emit('changed:comparators', Object.assign({}, this.comparators), oldComparators)                                          

            }
        },