Vue.js 更新的表单输入未过帐新值

以下是我的Vue模板：

<form action="[path]/post.php" ref="vueForm" method="post">
<input type="hidden" name="hiddenfield" :value="newValue">
<input type="button" value="new value and submit" @click="changeVal(456)">
</form>

[……]

以及PHP文件：

$getinfo = $_REQUEST['hiddenfield'];
echo $getinfo;

---

发布工作正常，但PHP打印123。我想知道为什么它没有发布新的值（应该是456，如果我只更新文本输入而不发布表单，它就可以工作）。

DOM更新是异步的。您必须等到下一个更新周期更新DOM：

  methods: {
    changeVal(value) {
      this.newValue = value;
      Vue.nextTick(() => {
        this.$refs.vueForm.submit()
      })
    }
  }

相关：

异步更新队列 如果您还没有注意到，Vue会执行DOM更新 异步。只要观察到数据更改，就会打开一个 对同一事件中发生的所有数据更改进行排队和缓冲 循环

证据/演示：

newvue({
el:“#应用程序”，
数据：{
新值：123
},
方法：{
changeVal（值）{
this.newValue=值；
console.log（'nextTick之前，输入：'，document.getElementById（'ipt'）.value）
console.log（'nextTick之前，txt:'，document.getElementById（'txt'）.innerText）
log（'在nextTick之前，应该已经提交'）；
Vue.nextTick（（）=>{
console.log（'nextTick之后，输入：'，document.getElementById（'ipt'）.value）
console.log（'nextTick之后，txt:'，document.getElementById（'txt'）.innerText）
log（'nextTick之后，将提交'）；
//这是。$refs.vueForm.submit（）
})
}
}
})

{{newValue}}

$getinfo = $_REQUEST['hiddenfield'];
echo $getinfo;

  methods: {
    changeVal(value) {
      this.newValue = value;
      Vue.nextTick(() => {
        this.$refs.vueForm.submit()
      })
    }
  }