如何在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;來保留組件的范圍var self = this; 在您的回調之外。

您還可以使用箭頭函數(result) => { your callback logic.. }來代替常規的函數，然后在其中使用“ this”，然后在其中使用“ 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)
       });
      }
    }
});

Answer 2

您必須在promise處設置一個粗箭頭功能，因為您不再在vue實例上下文中使用。