元素更改时 DOM 不更新 (VUE)

Question

for a vue/mvc project i am making a page divided into html sections. If the user clicks on a button a javascript function is called that changes the display properties of the sections so that only the clicked section is shown.

When the dom is created, it calls the function and correctly shows one section. However when the button is clicked, the function is called again, but the dom does not change.

Here is the code for the created function:

created: function () {
  var self = this;
  var sectionElements = document.getElementsByTagName("section");
  for (var i = 0; i < sectionElements.length; i++) {
    self.sections.push({ isSelected: false, object: sectionElements[i] });
  }
  for (var i = 0; i < self.sections.length; i++) {
    self.sections[i].isSelected = false;
  }
  this.showSelectedSection(0);   
},

Here is the code of the javascript function.

 showSelectedSection(index) {
  for (var i = 0; i < this.sections.length; i++) {
   if (i == index) {
      this.sections[i].isSelected = true;
      this.sections[i].object.style.display = "block";
   }
   else {
      this.sections[i].isSelected = false;
      this.sections[i].object.style.display = "none";
   }
 }

Does anyone know why this is happening and how i can fix it? Any tips or help is greatly appreciated.

Answer 1

First of all, I don't totally get why you're using self = this in this example, seems like it's not necessary. Nevertheless that is not your problem. You're modifying an object inside an array, and you're doing this by accessing the index. Normally that would be ok, but vue is not aware of this change. Try either passing the direct reference to the object inside the array or add a deep watch to your array so vue can hear this changes and make the proper modifications to your DOM.