时间戳

首页 > 解决方案 > 强制 Vue 重新渲染具有已移除属性的元素

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

问题描述

在我的 Vue 项目中，我使用了一个第三方库，它没有设置为与 Vue 很好地集成，因为它执行手动 DOM 操作，例如通过删除将有条件禁用的元素的“禁用”属性。每当这个库执行这些操作时，我希望 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>

标签： javascripthtmlvue.jsdom

解决方案

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

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;
})

推荐阅读