Vue.js-如何正确监视嵌套数据

JavaScript

ItachiEva

2020-03-09

我正在尝试了解如何正确观察道具的一些变化。我有一个父组件(.vue文件),它从ajax调用接收数据,将数据放入对象中,并通过v-for指令使用它来呈现某些子组件,以下是我的实现的简化:

<template>
    <div>
        <player v-for="(item, key, index) in players"
            :item="item"
            :index="index"
            :key="key"">
        </player>
    </div>
</template>

...然后在<script>标签内:

 data(){
     return {
         players: {}
 },
 created(){
        let self = this;
        this.$http.get('../serv/config/player.php').then((response) => {
            let pls = response.body;
            for (let p in pls) {
                self.$set(self.players, p, pls[p]);
            }
    });
}

项目对象是这样的:

item:{
   prop: value,
   someOtherProp: {
       nestedProp: nestedValue,
       myArray: [{type: "a", num: 1},{type: "b" num: 6} ...]
    },
}

现在,在我的孩子“玩家”组件中,我试图观察任何Item的属性变化,并使用:

...
watch:{
    'item.someOtherProp'(newVal){
        //to work with changes in "myArray"
    },
    'item.prop'(newVal){
        //to work with changes in prop
    }
}

它有效,但是对我来说似乎有点棘手,我想知道这是否是正确的方法。我的目标是每次prop更改或myArray获取新元素或在现有元素内部进行某些更改时都执行一些操作任何建议将不胜感激。

第320篇《Vue.js-如何正确监视嵌套数据》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

2个回答
Pro番长 2020.03.09

我用来“破解”该解决方案的另一种添加方法是:我设置了一个单独的computed值,该值将简单地返回嵌套对象的值。

data : function(){
    return {
        my_object : {
            my_deep_object : {
                my_value : "hello world";
            }.
        },
    };
},
computed : {
    helper_name : function(){
        return this.my_object.my_deep_object.my_value;
    },
},
watch : {
    helper_name : function(newVal, oldVal){
        // do this...
    }
}
梅小卤蛋梅 2020.03.09

我对使用的可接受答案的问题deep: true是,当深入观察数组时,我无法轻松确定数组的哪个元素包含更改。我找到的唯一清晰的解决方案是这个答案,它说明了如何制作组件,以便您可以分别观察每个数组元素。

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android