Vue.js v-bind有一个延迟,表单在更改值之前提交

问题描述 投票:1回答:1

我正在尝试使用SweetAlert模式中输入的值更新隐藏输入(基本上是一个提示)。

下面的代码不起作用,表单提交但隐藏字段value为null。

HTML:

<input type="hidden" name="input" v-model="value">

JavaScript的:

this.value = websiteId;
event.target.submit();

以下代码似乎确实有效!但是,如果我只使用普通的旧JavaScript,那么使用Vue.js并不是很重要。

HTML:

<input type="hidden" class="input-value-web" name="input" value="0">

JavaScript的:

document.querySelector('.input-value-web').value = websiteId;
event.target.submit();
javascript vue.js
1个回答
2
投票

当您更改Vue实例的数据属性的值时,就像您使用this.value = websiteId一样,该绑定属性将不会更新<input>的值,直到Vue实例的下一次更新。

但是,直到方法中的所有内容都已执行后才会发生下一次更新。

要解决这个问题,请在执行$nextTick method之前使用event.target.submit()等待Vue实例更新。

这是一个例子:

methods: {
  submitForm() {
    this.value = websiteId;
    this.$nextTick(() => {
      event.target.submit();
    });
  }
}
© www.soinside.com 2019 - 2024. All rights reserved.