强制Vue重新渲染被删除属性的元素。

Question

在我的Vue项目中，我使用了一个第三方库，这个库的设置并没有与Vue很好地集成，因为它执行了手动的DOM操作，例如删除一个元素的 "disabled "属性，这个元素将被有条件地禁用。每当这个库执行这些操作时，我都希望Vue能刷新它的状态。乍一看 $forceUpdate 方法似乎很完美，但似乎并不像我期望的那样工作... ... 这里是 一个Codepen演示的东西，在调用后，以 removeAttribute 我需要一些方法让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;
})