Vue中填完字段后才提交表單

Question

我正在構建一個 Vue 應用程序。 當我單擊表單中的按鈕時，我想用值paypal填寫輸入，然后提交表單。 但是從test_form.php （它是表單的文件操作）變量$_POST['paymentMethod']包含null而不是paypal ！ 我哪里錯了？

這是我正在使用的代碼：

HTML：

<form action="test/test_form.php" method="POST" ref="form">
  <button type="button" v-on:click="setMethod('cc')">Credit card</button>
  <button type="button" v-on:click="setMethod('paypal')">Paypal</button>
  <input type="text" name="paymentMethod" required v-model="selectedMethod">
</form>

Javascript：

new Vue({
  el: "#app",

  data: {
    selectedMethod: null,
  },

  methods: {

    // Set payment
    setMethod: function(type) {
      this.selectedMethod = type; // Here I fill the field
      this.$refs.form.submit(); // Then I submit the form
    },
  }

});

Answer 1

嘗試使用 Vue 的nextTick方法將表單發布推遲到 DOM 更新后：

  if (type == 'paypal'){
    var me = this;
    Vue.nextTick(function() {
        me.$refs.form.submit();
    });
  }