Question

我的父数据中有一个嵌套对象，它看起来像这样。

obj: {
   1: {
     'a': [ [], [], [] ]
     'b': [ [] ]
   },
   2: {
     'x': [ [], [] ]
   }
}

初始化时，在我父母的数据中，我将此obj初始化为{}。当我尝试在我的子组件中使用观察器时，它只会监视1,2键级别，而不会在字母键级别发生更改时。但是，即使内部级别发生变化，我也希望它能够执行。

// in my component
computed: {
    watchForms() {
        alert("X");
    }
},

然后，当我向对象添加/删除新元素时，我尝试使用emit / on从根元素告诉子元素 - 发出事件并将其捕获到组件上。

// So I set a global variable,
Vue.prototype.globalEvents = new Vue();

// In my root element, initialised the obj
data: {
   obj: {}
} 

// In my root element methods, when changes happen on my obj
methods: {
   changeHappened() {
     this.globalEvents.$emit('updated');
   }
}

// And in my component, I tried to catch it and run the method,
created: function() {
    this.globalEvents.$on('updated', this.watchForms);
},

[Vue警告]：“已更新”的事件处理程序出错：“TypeError：无法读取属性'apply'of undefined”（找到）

我收到此错误但是我没有给任何.apply()打电话：/我做错了什么？

Answer 1

之前我已经回答了您的其他question这个问题似乎是相关的，所以我要修改我使用deep: true所说明的相同代码段，然后您就可以了能够观看嵌套属性：

＆＃13;

const app = new Vue({
  el: '#app',
  data: {
    types: {},
    history: []
  },
  watch: {
    types: {
      handler(newVal) {
        this.history.push(JSON.stringify(newVal));
      },
      deep: true
    }
  },
  methods: {
    pushValue(key, value) {
      if (this.types.hasOwnProperty(key)) {
        if (this.types[key].hasOwnProperty(value)) {
          const orgValue = this.types[key][value];
          orgValue.push([]);
          this.$set(this.types[key], value, orgValue);
        } else {
          this.$set(this.types[key], value, [[]]);
        }
      } else {
        this.$set(this.types, key, {
          [value]: [ [] ]
        });
      }
    }
  }
});

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script>
<div id="app">
  <div>
    <p>pushValue(key, value)</p>
    <button v-on:click="pushValue(1, 'a')">(1, 'a')</button>
    <button v-on:click="pushValue(1, 'b')">(1, 'b')</button>
    <button v-on:click="pushValue(1, 'c')">(1, 'c')</button>
    <button v-on:click="pushValue(2, 'a')">(2, 'a')</button>
    <button v-on:click="pushValue(2, 'b')">(2, 'b')</button>
    <button v-on:click="pushValue(2, 'c')">(2, 'c')</button>
  </div>
  <div>types:</div>
  <div>{{ types }}</div>
  <div>modified:</div>
  <div v-for="item in history">{{ item }}</div>
</div>

＆＃13;

从父级查看嵌套对象数据

1 个答案: