Splice - move up/down

by Ben Clayton

HTML

<div id="app">

  <div v-for="(blk,idx) in blocks" :class="{selected:isSelected(idx)}">{{ blk.name }} {{ blk.time }}</div>

  <button @click="sidat0">Sid</button>
  <button @click="moveSelected(1)">Up</button>
  <button @click="moveSelected(-1)">Down</button>
  <br/>idx<input v-model="idx" />
  <br/>Qty<input v-model="qty" />

</div>

CSS

div > div {
  margin: 10px;
  background-color: lightgray;
  padding: 5px;
  font-size: 18px;
}
.selected {
  color: red;
}

JavaScript

new Vue({
  el: "#app",
  data: {
    qty: 1,
    idx: 0,
    blocks: [{
        name: "one",
        time: 0
      },
      {
        name: "two",
        time: 0
      },
      {
        name: "three",
        time: 0
      },
      {
        name: "four",
        time: 0
      },
      {
        name: "five",
        time: 0
      },

    ]
  },
  methods: {
    isSelected: function(i) {

      return i >= this.idx && i < parseInt(this.idx, 10) + parseInt(this.qty, 10)
    },
    sidat0: function() {
      //debugger;
      this.blocks[0].name = "Sid"
    },
    moveSelected: function(dir) {
      var arr = this.blocks;
      console.log("found selected", this.idx);
      if (dir === 1) {

        this.moveup(arr, parseInt(this.idx, 10), parseInt(this.qty, 10));
        this.idx++;
      } else {

        this.movedown(arr, parseInt(this.idx, 10), parseInt(this.qty, 10));
        this.idx--;
      }
    },
    moveup: function(arr, idx, qty) {
      qty = qty || 1;
      //console.log(this.blocks.slice(1,2)[0].name);
      //debugger;
      if (idx + qty >= arr.length) {
        console.log("not allowed");
        return
      }
      //debugger;
      var blks = arr.splice(idx, qty);
      arr.splice(idx + 1, 0, ...blks);

    },
    movedown: function(arr, idx, qty) {
      if (idx < 1) {
        console.log("not allowed");
        return
      }
      //console.log(this.blocks.slice(1,2)[0].name);
      //debugger;
      var blk = arr.splice(idx, qty);
      arr.splice(idx - 1, 0, ...blk);
    }
  },
  mounted: function() {
    setInterval(function() {
      this.blocks[0].time++;
    }.bind(this), 1000)
  }
});