Я пытаюсь создать функцию перемешивания в 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 активно развивается и обновляется с выходом новых версий и функций.
Расчетные свойства - это просто функции получения, которые возвращают значение и зависят от других реактивных свойств.
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);
}
}
}
});
Вот такой рабочая рабочий пример