在 vueJs 的方法中使用计算属性

Question

我正在尝试在 vue.js 中创建随机播放功能。因此，为此我创建了一个计算属性，然后我调用了一个方法。但它不起作用。我创建了另外两个函数 'add' 和 'remove' 这两个工作正常除了 'shuffle'.

抛出错误：未捕获类型错误：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

Computed properties 只是 getter 函数 return 一个值并依赖于其他反应属性。

1. 您计算的属性 moveIndex 只是修改数组数据属性即 this.tasks。因此，只需使用一种方法即可。

2. 您正在尝试使用索引直接修改 this.tasks 数组的一项。 Vue 无法检测到 such array modifications.

所以请改用this.$set() or 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);
      }
    }

  }
});

这是一个working fiddle

在 vueJs 的方法中使用计算属性

Using Computed Properties inside Methods in vueJs

vue.js

computed-properties