javascript - Vue.js v-bind 有延迟，表单在值更改之前提交

Question

我正在尝试使用来自 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();

Answer 1

当您更改 Vue 实例的数据属性的值时，就像您对 this.value = websiteId 所做的那样，该绑定(bind)属性不会更新 <input> 的值直到 Vue 实例的下一次更新。

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

要解决这个问题，请使用 $nextTick method等到 Vue 实例更新后再执行 event.target.submit() .

这是一个例子:

methods: {
  submitForm() {
    this.value = websiteId;
    this.$nextTick(() => {
      event.target.submit();
    });
  }
}