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