VueJS : reverse data array has no effect

Question

In this fiddle : https://jsfiddle.net/djsuperfive/svctngeb/ I want to reverse the structure array in data when I click the button.
Why are the rendered list and the dump of structure not reactive whereas the console.log reflect that the reverse was effective ?

The code :

HTML

<div id="app">

  <draggable v-model="structure">
    <div v-for="(item, index) in structure" :style="'background-color:'+item.color">
      {{ item.title }}
    </div>
  </draggable>

  <button type="button" @click="reverse()">Reverse structure</button>

  <hr>
  <strong>dump structure:</strong>
  <pre>
    {{ structure }}
  </pre>
</div>

JS:

new Vue({
  el: '#app',
  data() {
    return {
      structure: [{
          title: 'Item A',
          color: '#ff0000'
        },
        {
          title: 'Item B',
          color: '#00ff00'
        },
        {
          title: 'Item C',
          color: '#0000ff'
        },
      ],
    }
  },
  methods: {
    reverse() {
      console.log(this.structure[0].title);
      _.reverse(this.structure);
      console.log(this.structure[0].title);
    }
  }
});

thanks

Evgeny Melnikov · Accepted Answer · 2019-04-10 10:18:01Z

1

Max! Try to replace line:

_.reverse(this.structure);

with

this.structure.reverse();

I guess, Underscore.js does not have reverse method, because JavaScript has native one. Everything should work fine with native JS Array reverse function. Good luck!

answered Apr 10, 2019 at 10:18

Evgeny Melnikov

1,0921 gold badge8 silver badges15 bronze badges

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

2 Comments

superfive33 Over a year ago

You're right Evgeny ! I also just found that it's working with the native reverse method.

Evgeny Melnikov Over a year ago

Great to hear that!) Congratulations =)

tony19 · Accepted Answer · 2022-07-15 02:23:48Z

0

The problem here seems to be that Vue does not detect that your array has changed: https://v2.vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats

The solution is to either replace this.structure with a new array or to have a reverse function that uses Vue.set().

this.structure = _.clone(_.reverse(this.structure));

edited Jul 15, 2022 at 2:23

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Apr 10, 2019 at 10:46

Daniele Torino

1,8422 gold badges17 silver badges22 bronze badges

Collectives™ on Stack Overflow

VueJS : reverse data array has no effect

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related