Vue如何观看json数据的内部值

Question

我的数据中有'd'数组，我想观察它的元素是否被更改，但是有些元素是嵌套的。

我的示例基本上是如果我将Apple的值更改为Axe，观察者应执行其中的方法，我该如何实现？

 <template>
  <div>
    <button @click="change">Click me</button>
    {{ d }}
  </div>
</template>

<script>
export default {
  watch: {
    d: function() {
      this.hello();
    },
  },
  data() {
    return {
      d: [{ a: 'apple' }, { b: 'bananana' }, 'c'],
    };
  },
  methods: {
    hello() {
      alert('Executed');
    },
    change() {
      this.d[0].a = 'axe';
    },
  },
};
</script>

<style></style>

Answer 1

在观察者上使用deep: true

watch: {
    d: {
      handler(val) {
        this.hello();
      },
      deep: true
    }
  },