如何只查看数组中的一个对象？

Question

我有一个数组:

basicForm.schema = [
  {},
  {} // I want to watch only this
]

我试过这样做:

‘basicForm.schema[1].value’: {
  handler (schema) {
    const plan = schema.find(field => {
      return field.name === ‘plan’
    })
  },
  deep: true
},

但我得到了这个错误:

vue.js？3de6:573 [Vue警告]:观看路径失败:"basicForm.schema [1]"Watcher只接受简单的点分隔路径.要完全控制,请改用函数.

这样做的正确方法是什么？

Answer 1

你可以watch一个computed property代替:

new Vue({
  el: '#app',
  data: {
    basicForm: {
      schema: [
      	{a: 1},{b: 2} // I want to watch only this
      ]
    }
  },
  computed: {
    bToWatch: function() {
      return this.basicForm.schema[1].b
    }
  },
  methods: {
    incB: function() {
      this.basicForm.schema[1].b++
    }
  },
  watch: {
    bToWatch: function(newVal, oldVal) {
      console.log(newVal)
    }
  }
});

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
  <button @click="incB()">Inc</button>
</div>

Answer 2

您应该按照警告消息的建议使用函数。您需要通过vm.$watch.

new Vue({
  el: '#app',
  
  data: {
    items: [
      { name: 'bob' },
      { name: 'fred' },
      { name: 'sue' },
    ],
  },
  
  created() {
    this.$watch(() => this.items[1].name, this.onNameChanged);
  },
  
  methods: {
    changeValue() {
      this.items[1].name = 'rose';
    },
    
    onNameChanged(name) {
      alert('name changed to ' + name);
    },
  },
});

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
  <button @click="changeValue">Click me</button>
</div>

this.items[1]在 watch 函数中访问它之前，您可能应该检查它是否存在，否则您会收到错误消息。