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

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

Выдается сообщение об ошибке: Неперехваченная ошибка типа: 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 computed-properties
person kvinbabbar    schedule 08.07.2018    source источник
comment
Вы не можете вызывать вычисленные свойства как функцию. Это свойства (vuejs.org/v2/guide/computed.html). Если вы хотите, чтобы функция переместила ее в методы, и вы могли вызвать ее как таковую.   -  person Badu    schedule 08.07.2018
comment
Я не вижу ни одной причины, по которой moveIndex имел бы смысл в качестве вычисляемого. Поместите это в методы.   -  person connexo    schedule 08.07.2018
comment
Также это классический случай проблемы x-y.   -  person connexo    schedule 08.07.2018

Ответы (1)


arrow_upward
4
arrow_downward

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

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

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

Поэтому используйте this.$set() или _ 5_.

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

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

  }
});

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

person Vamsi Krishna    schedule 08.07.2018