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

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 callback”中使用箭头函数 (result) => { your callback logic.. } 而不是常规函数，然后在内部的“this”将意味着您的组件的'this'，因为箭头函数没有单独的内部作用域。

就像箭头函数一样:

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