Question

我使用了Vuejs，下面的代码来自methods属性下的一个函数。 我尝试在Promise中操作DOM，从数据库中检索信息并将其用作选择器：

.then(() =>{
  for (var i in obj){
     for (var j in obj[i]){
         document.getElementById(i + j).style.display = 'none';
      }
  }
})

我尝试了jquery和js，然后注销它们以查看它们是否选择了正确的元素，并且确实打印出了我要操作的正确元素，但是，当我尝试addClass（）removeClass（）或hide（），即使成功执行了这些操作（我通过注销更改的元素验证了它），当我将display属性设置为“ none”并检查HTML代码时，它们也不会在视图中更新元素不在HTML中，但可以在视图中正常显示。

我想知道为什么会这样，并想知道是否还有一种适当的方法来更新视图，谢谢。

Answer 1

您缺少style。 document.getElementById(i + j).style.display = 'none';

顺便说一句，您可以并且应该确实使用data对象通过Vue做到这一点。 Vue是面向数据的，其反应性可以使用data，computed等来实现。在操作过程中直接操作DOM将绕过任何反应性。

Answer 2

Vue的DOM对象保存在支持它的浏览器中的Shadow DOM中。这提供了与其余DOM的隔离，但在某些情况下会显示为 hidden 。这就是为什么您尝试更改DOM无效的原因。

Vue的重点是消除直接更改DOM的需要。 Vue Guide的第一部分显示了仅通过更改数据即可轻松更新视图。

查看即使HTML更改也不更新

2 个答案: