Question

在我的Vue项目中，我使用的第三方库并未设置为与Vue很好地集成，因为它执行手动DOM操作，例如，通过删除要有条件禁用的元素的“ disabled”属性。每当该库执行这些操作时，我都希望Vue刷新其状态。乍看之下，$forceUpdate方法似乎是完美的，但是它似乎并没有按我期望的那样工作... Here's在调用removeAttribute之后，演示了事物的Codepen需要某种使Vue重新开始应用条件“禁用”标记的方法。

代码：

const vm = new Vue({
  el: "#app",
  data: {
    buttonDisabled: true,
  }
});

document.getElementById('button').removeAttribute('disabled');

vm.$forceUpdate(); // doesn't work

和

<div id="app">
  <button id="button" :disabled="buttonDisabled">
    test
  </button>
</div>

Answer 1

您应该将模板视为“纯函数”，这意味着您不应该干扰渲染的输出，否则由于这种副作用，您会得到意想不到的结果。

Vue跳过重新渲染，因为没有任何变化，因此您需要进行更改以正确重新渲染。

在您的特定示例中，您可以使用disabled来切换$nextTick道具。

document.getElementById('button').removeAttribute('disabled');

// first change
vm.buttonDisabled = false;

// wait until the update queue is done so Vue can pick up the changes
vm.$nextTick(() => {
  // toggle it back on
  vm.buttonDisabled = true;
})

强制Vue重新渲染具有已删除属性的元素

1 个答案: