Question

在访问表单变量时遇到麻烦。我收集了此，应该允许我访问数据，但在控制台中仍然看到未定义的内容。

Vue.use(VeeValidate);

new Vue({
  el: "#app",
  data: {
    form: {
      duration: 7
    }
  },
  methods: {
      doSubmit() {
       this.$validator.validateAll().then(function(result){
        if (!result){
            //this means a validation failed, so exit without doing anything
            console.log('did not work')
            return;
        }
        console.log('did work, duration is:')
        console.log(this.form)
       });
      }
    }
});

Answer 1

尝试一下：

Vue.use(VeeValidate);

new Vue({
  el: "#app",
  data: {
    form: {
      duration: 7
    }
  },
  methods: {
      doSubmit() {
       var self = this;
       this.$validator.validateAll().then(function(result){
        if (!result){
            //this means a validation failed, so exit without doing anything
            console.log('did not work')
            return;
        }
        console.log('did work, duration is:')
        console.log(self.form)
       });
      }
    }
});

我认为这里的问题是，.then内部的回调函数具有自己的作用域，因此其自身的“ this”与组件中的“ this”不同。它属于另一个范围。您可以通过在回调之外执行var self = this;来保留组件的作用域。

您还可以在'then回调'中使用箭头函数(result) => { your callback logic.. }代替常规函数，然后在其中的'this'表示组件的'this'，因为arrow函数没有单独的内部作用域

与箭头功能类似：

new Vue({
  el: "#app",
  data: {
    form: {
      duration: 7
    }
  },
  methods: {
      doSubmit() {
       this.$validator.validateAll().then((result) => {
        if (!result){
            //this means a validation failed, so exit without doing anything
            console.log('did not work')
            return;
        }
        console.log('did work, duration is:')
        console.log(this.form)
       });
      }
    }
});

Answer 2

您必须在promise处添加一个粗箭头功能，因为您不再在vue实例上下文中使用。

如何在VueJS方法中访问表单变量

2 个答案: