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代替：

＆＃13;

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)
    }
  }
});

＆＃13;

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
  <button @click="incB()">Inc</button>
</div>

＆＃13;

Answer 2

您应该使用函数作为警告消息建议。您需要通过vm.$watch完成此操作。

＆＃13;

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);
    },
  },
});

＆＃13;

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
  <button @click="changeValue">Click me</button>
</div>

＆＃13;

您应该检查this.items[1]是否存在，然后才能在监视功能中访问它，否则您将收到错误。

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

2 个答案: