仅在填写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();
    };
  }