重新分配数组

Question

我的代码如下：

初始虚拟按钮被禁用。输入值更改后，将启用“虚拟”按钮。

假设我有以下一系列事件：

我将“ a”更改为“ abc”
然后启用“虚拟”按钮
我在第一行中按“提交”
“虚拟”按钮仍处于启用状态
在第一行中，我按空格键，然后按退格键，这样输入仍然是'abc'
请注意，“虚拟”按钮已禁用

我真正想要的是在按下“提交”后立即在上面的步骤（4）中禁用“虚拟”按钮。

由于某些原因，在以下代码行之后没有更改：

that.initialValues[index] = value;

如何在按下“提交”后立即禁用“虚拟”按钮？

Answer 1

此问题与反应性有关。

从数组中更改元素不会使基于此数组的计算结果重新呈现。

您在这里有多种选择：

重新分配数组

在您的submit方法中，您可以创建数组的副本，更改元素，然后在Vue实例中重新分配数组：

submit: function(value, index) {
  setTimeout(() => {
    const initialValues = [ ...this.initialValues ]
    initialValues[index] = value;
    this.initialValues = initialValues
  }, 100);
}

使用$ set

您还可以使用$set方法来设置新值并进行重新渲染：

submit: function(value, index) {
  setTimeout(() => {
    this.$set(this.initialValues, index, value)
  }, 100);
}

在Vue.js中，为什么没有适当禁用我的按钮？

1 个答案:

重新分配数组

使用$ set