Using Computed Properties inside Methods in vueJs

Question

I'm trying to create a shuffle function in vue.js. So, for this i created a computed properties and then i call a method. but it doesn't working. I've created two more function 'add' and 'remove' these two working fine except 'shuffle'.

Throwing an error: Uncaught TypeError: this.moveIndex is not a function

Answer 1

Computed properties are just getter functions that return a value and are dependent on other reactive properties.

1. Your computed property moveIndex is just modifying an array data property i.e this.tasks. So just use a method instead.

2. You are trying to directly modify an item of the this.tasks array using index. Vue cannot detect such array modifications.

So use this.$set() or Array.prototype.splice() instead.

Here are the changes:

var app = new Vue({
  el: "#root",
  data: {
    tasks: [1, 8, 9],
    nextNum: 10
  },
  methods: {
    randIndex: function() {
      return Math.floor(Math.random() * this.tasks.length);
    },
    add: function() {
      this.tasks.splice(this.randIndex(), 0, this.nextNum++);
    },
    remove: function() {
      this.tasks.splice(this.randIndex(), 1);
    },
    shuffle: function() {
      var array = this.tasks;
      var currentIndex = this.tasks.length;
      var randomIndex;
      var tempVal;

      for (var i = currentIndex - 1; i > 0; i--) {
        randomIndex = Math.floor(Math.random() * currentIndex);
        tempVal = array[i];
        this.$set(array, i, array[randomIndex]);
        this.$set(array, randomIndex, tempVal);
      }
    }

  }
});

Here is a working fiddle