javascript - 如何创建一个按钮来更改 Vue.js 中的数组位置？

Question

我想要一个按钮，按下时会改变数组位置。我想到了创建一个辅助变量来求和并且数组改变位置的可能性。问题是：当我对此进行编程时，浏览器的 HTML 和控制台没有任何变化，JS 说：“未定义”。我该如何解决？我在一个函数中尝试了var,let并替换了用于更改数组位置的旧属性，但没有奏效。如果计数器超过数组的大小，我没有设置限制，但即使在第一个位置（1、2 和 3），它也会出现undefined。

HTML

<div id="app">
     <button @click="changePos()">Generic Button</button>
</div>

JS

new Vue({
     el: '#app',
     data: {
          counter: 0,
          test: [5, 6, 7]
     },
     methods: {
          changePos(){
               this.counter++
               console.log(this.test[this.counter]) // Here appears "undefined"
          }
     }
});

标签： javascripthtmlarraysvue.js