Vue.js Push doesn't update view

Question

I create a array which contains objects describing information of buttons. In my template I have a class active which is represent the active button. By default the first button of the array is active.

template:

<b-button-group class="page-buttons mt-2" size="sm">
   <b-button v-for="btn in buttons" 
      :key="btn.key" 
      @click="selectPage(btn.key)"
      v-bind:class="{'active': btn.active}">{{ btn.caption }}
   </b-button>
 </b-button-group>

Script:

methods: {
    $createPaginationButtons: function(numberParameters) {
      const numberPages = Math.ceil(numberParameters / NUMBER_ELEMENT_PER_PAGE);
      this.buttons = [];

      for (let i = 0; i < numberPages; i++) {
        this.buttons.push({
          caption: `PAGE ${i + 1}`,
          active: (i === 0),
          key: (i + 1)
        });
      }

      Vue.set(this.buttons[0], 'active', true);
   }
}

The buttons array is initialize in data as an empty array. when my buttons array changes, the view is updated and display the correct number of buttons but my class active is not triggered.

Have you any idea.

Can you please share the data object?, also when or what triggers createPaginationButtons? — Jaya
– Jaya, Commented Nov 18, 2018 at 0:22

Rodrigo Martín de Lamo · Accepted Answer · 2018-11-17 23:13:25Z

1

Push is a wrapped method so it will trigger a view update.

Do you have declared buttons on the data property?

data() {
     buttons:[]
}

Since you are creating the active property as i === 0 you don't need Vue.set.

I don't know if has something to do but instead of making buttons empty and then pushing, use an aux variable to create the array and then just do this.buttons = auxVariable. This should trigger an update.

answered Nov 17, 2018 at 23:13

Rodrigo Martín de Lamo

1817 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

onedkr Over a year ago

Yes i have declared buttons in data property like your code. I don't understand what is aux variables ?

Rodrigo Martín de Lamo Over a year ago

I mean to push the array into a different variable, a local variable of the function, and then just assing the value of this new variable to the buttons variable.

onedkr Over a year ago

I try this option too, but it's the same result, it doesn't update my view :/

Rodrigo Martín de Lamo Over a year ago

Mmm, have you checked if the array contains something? It is weird. Maybe the loop is not iterating and then the view doesn't update because the array is empty.

onedkr Over a year ago

No everything is correct, i don't understand why too. My arrays contains the correct values, the view is updated and dispay the correct number of buttons but my class active is not triggered

|

Collectives™ on Stack Overflow

Vue.js Push doesn't update view

1 Answer 1

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related