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

Я пытаюсь создать функцию перемешивания в 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>

🤔 А знаете ли вы, что...
Vue.js активно развивается и обновляется с выходом новых версий и функций.


2
9 364
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);
      }
    }

  }
});

Вот такой рабочая рабочий пример