[Vuejs]-How to resort components after rendering theme

by

2👍

✅

As commented out, you don’t need to do anything for this, vue wraps an observed array’s mutation methods so they will also trigger view updates as explained here. The wrapped methods are:

  • push()
  • pop()
  • shift()
  • unshift()
  • splice()
  • sort()
  • reverse()

You can see the working demo here how rearrangement happening here.

Sample JS Code:

Vue.component('comp2', {
  props: ['title'],
  template: '#comp2'
})

new Vue({
    el: '#app',
  data: {
    compArray: ['comp1', 'comp2', 'comp3']
  },
  methods: {
    resuffle: function() {
       this.compArray.splice(0,1)
       this.compArray.push(this.compArray[0])
    }
  },
})

Relevant HTML:

  <div v-for="comp in compArray">
      <comp2 :title="comp">
  </div>
👤Saurabh

Leave a comment