Question

我的API为我提供了一个哈希，我收到的是一个AJAX调用的一部分。 AJAX响应的内容（包括哈希）是更新data实例中的Vue组件（以便按照通常的Vue使用情况修改DOM）。

我想知道是否可以在更改特定data元素时触发（运行）函数。 Reactivity in Depth并没有提到这个和我（如果这是错误请纠正我）computed和methods是一种间接为DOM提供新计算元素的方法（换句话说，他们不要启动，因为特定元素被修改，而是data和提供给DOM的其他变量之间的同步方法。

我希望有类似的东西（这是非工作，不正确的伪代码，我只是将它添加到Vue实例的上下文中）：

var vm = new Vue({
    el: '#root',
    data: {
      hash: null
    },
    functions_to_trigger_upon_an_element_change: {
      hash: function () {
        location.reload()
      }
    }
  })

上述想法是在location.reload()的值发生变化时运行hash。

Vue中是否有这样的机制？

如果没有，我将独立于Vue保持状态，并根据其变化采取相应行动，但重复使用Vue手表属性来做这件事会很好。

Answer 1

您可以使用手表，如下例所示：

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
})

关于您的情况，以下是有关如何实施的示例。

var vm = new Vue({
  el: '#demo',
  data: {
    hash: 'Foo' 
  },
  watch: {
    hash: function (val) {
      // when the hash prop changes, this function will be fired.
      location.reload()
    } 
  }
})

我希望我理解你的问题。

Answer 2

我认为这应该有用

var vm = new Vue({
    el: '#root',
    data: {
      hash: null
    },
    watch: {
        hash: function (val) {
          functions_to_trigger_upon_an_element_change()
        }
    },
    methods: {
        functions_to_trigger_upon_an_element_change() {
            // You code
        }
    }
 })

Answer 3

你应该使用这个。在上面的例子中

var vm = new Vue({
    el: '#root',
    data: {
      hash: null
    },
    watch: {
        hash: function (val) {
          this.functions_to_trigger_upon_an_element_change()
        }
    },
    methods: {
        functions_to_trigger_upon_an_element_change() {
            // You code
        }
    }
 })

是否可以在Vue数据元素更改时触发函数？

3 个答案: