Просмотр не обновляется даже HTML изменился

Question

Я использовал Vuejs, а следующий код взят из функции в свойстве методов. Я пытаюсь манипулировать 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

DOM-объекты Vue хранятся в Shadow DOM в браузерах, которые его поддерживают.Это обеспечивает изоляцию от остальной части DOM, но в некоторых случаях будет выглядеть скрытым .Вот почему ваши попытки изменить DOM не имеют никакого эффекта.

Суть Vue состоит в том, чтобы устранить необходимость прямого изменения DOM.Первые части Vue Guide показывают, насколько просто обновить представление, просто изменив данные.

Answer 2

Тебе не хватает style. document.getElementById(i + j).style.display = 'none';

Кроме того, вы можете и должны делать это через Vue, используя объект data. Vue ориентирован на данные, и его реактивность работает с использованием data, computed и т. Д. Непосредственное манипулирование DOM, как и вы, обходит любую реактивность.