代码之家 › 专栏 › 技术社区 › Yamaha32088

Vue似乎在更新隐藏表单输入中的值之前提交表单

vuejs2 vue.js javascript

Yamaha32088 · 技术社区 · 6 年前

我有一个Vue应用程序的动态形式,有两个按钮,我需要在请求中发送其中一个被点击。我是通过更新一个隐藏输入字段的值,然后用jQuery提交表单来实现的。出于某种原因,虽然我第一次点击按钮,将隐藏的输入设置为 true 它发出 false

下面是我在没有实际jQuery请求的情况下所做工作的一个小片段。我可以看到值被正确更新,所以我不确定它是否是一个竞赛条件,或者我是否遗漏了一些明显的东西。

<form id="myVueForm">
  <input type="hidden" name="submitEdit" :value="submitEdit">
  <button type="button" @click="submitEdit = true">Submit Edit</button>
  <button type="button" @click="submitEdit = false">Submit without Edit</button>
</form>

var myApp = new Vue({
  el: '#myVueForm',
  data: function() {
    return {
      submitEdit: false
    }
  },
  watch: {
    'submitEdit': function(value) {
      console.log(this.submitEdit, "submitEdit value");
      console.log('Submitting form!');
    }
  }
})

https://codepen.io/anon/pen/jvGXLG?editors=1111

1 回复 | 直到 5 年前

Abana Clara 6 年前

Vue的更新机制本质上是异步的。如果在对虚拟DOM进行更改之后立即执行某项操作,那么即使在应用对Vue的DOM的更新之前,立即代码也会首先执行。你必须使用 .$nextTick() 为了在虚拟DOM的实际更新(下一个记号)之后执行一些事情。

'submitEdit': function(value) {
   this.$nextTick(function(){
      console.log(this.submitEdit, "submitEdit value");
      console.log('Submitting form!');
   });
 }

推荐文章

Softly · 单选按钮未按预期取值

1 年前

Jason Owens · 我的html/javascript播放按钮无法播放嵌入的youtube视频

1 年前