Ytukyg

I used Vuejs, and the following code is from a function under the methods property.
I try to manipulate the DOM inside a promise, where I retrieve info from the database and use that info as a selector:

.then(() =>{

  for (var i in obj){

     for (var j in obj[i]){

         document.getElementById(i + j).style.display = 'none';

      }

  }

})

I tried both jquery and js, and log them out to see if they selected the right element, and they did print out the correct element that I want to manipulate, however, when I try to addClass() removeClass() or hide(), even though these actions are executed successfully(I verified it by logging out the changed element), they are not updated in the view, when I set the display property as "none", and I checked the HTML code, these elements are not in the HTML, but they are displayed normally in the view.

I wonder why this happened, and wanted to know if there's a proper way to update the view as well, thank you.

You're missing style. document.getElementById(i + j).style.display = 'none';

As an aside, you can and should really do this through Vue using the data object. Vue is data oriented and its reactivity works using data, computed, etc. Directly manipulating the DOM as you are doing will bypass any reactivity.

Vue's DOM objects are kept in a Shadow DOM in browsers that support it. This provides isolation from the rest of the DOM but will appear hidden in some cases. This is why your attempts to alter the DOM aren't having any effect.

The very point of Vue is to remove the need to directly alter the DOM. The first parts of the Vue Guide show just how easy it is to update the view simply by altering data.