相关疑难解决方法(0)

Vue.js - 如何正确观察嵌套数据

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

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

...然后在<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]);
            }
    });
}
Run Code Online (Sandbox Code Playgroud)

item对象是这样的:

item:{
   prop: value,
   someOtherProp: {
       nestedProp: nestedValue,
       myArray: [{type: "a", num: 1},{type: "b" num: 6} ...]
    },
}
Run Code Online (Sandbox Code Playgroud)

现在,在我的孩子"玩家"组件中,我正在尝试观察任何Item的属性变化,我使用:

...
watch:{
    'item.someOtherProp'(newVal){
        //to work with changes in "myArray"
    },
    'item.prop'(newVal){
        //to …
Run Code Online (Sandbox Code Playgroud)

javascript vue.js vue-resource vue-component

323
推荐指数
13
解决办法
19万
查看次数

标签 统计

javascript ×1

vue-component ×1

vue-resource ×1

vue.js ×1