Использование вычисляемых свойств внутри методов в vueJs

Question

Я пытаюсь создать случайную функцию в vue.js. Итак, для этого я создал вычисляемые свойства, а затем я вызываю метод. но это не работает. Я создал еще две функции "добавить" и "удалить", эти два прекрасно работают, кроме "перемешать".

Выдает ошибку: Uncaught TypeError: this.moveIndex не является функцией

var app = new Vue({
  el: '#root',
  data: {
    tasks: [1,8,9],
    nextNum: 10
  },
  computed: {
    moveIndex: function(array){
      var currentIndex = array.length, randomIndex, tempVal;
      for(var i = currentIndex - 1; i > 0; i--){
        randomIndex = Math.floor(Math.random() * currentIndex);
        tempVal = array[i];
        array[i] = array[randomIndex];
        array[randomIndex] = tempVal;
      }
      return array;
    }
  },
  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 arr = this.tasks;
      arr = this.moveIndex(arr)
    }
  }
});

.bar-enter-active, .bar-leave-active{
  transition: all 1s;
}
.bar-enter, .bar-leave-to{
  opacity: 0;
  transform: translateY(30px)
}
.bar-move{
  transition: transform 1s 
}
.numbers{
  margin-right: 10px;
  display: inline-block
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>

 <div id="root">
  <button @click="add">Add</button>
  <button @click="remove">Remove</button>
  <button @click="shuffle">Shuffle</button>
  <transition-group name="bar" tag="div">
   <span v-for="task in tasks" :key="task" class="numbers">{{task}}</span>
  </transition-group>
 </div>

Answer 1

Вычисленные свойства - это просто функции-получатели, которые возвращают значение и зависят от других реактивных свойств.

1. Ваша компьютерная собственность moveIndex просто изменяет свойство данных массива, т.е. this.tasks, Так что просто используйте метод вместо.

2. Вы пытаетесь напрямую изменить элемент this.tasks массив с использованием индекса. Vue не может обнаружить такие модификации массива.

Так что используйте this.$set()или же Array.prototype.splice() вместо.

Вот изменения:

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);
      }
    }

  }
});

Вот рабочая скрипка