Vuejs：第三次按下按钮后，我需要将按钮重置回名字答案

【问题标题】：Vuejs: I need to reset the button back to the first name after pressing the button the third timeVuejs：第三次按下按钮后，我需要将按钮重置回名字
【发布时间】：2018-10-29 23:03:25
【问题描述】：

我有这个 vuejs 代码，我想用一个按钮做循环效果。我希望按钮在第三次单击按钮后立即返回到第一条评论（即在 Javascript 中）。下面是我的 HTML 和 Javascript 代码。非常感谢。

HTML：

<button class="next" @click="increment"> > </button>

Javascript：

<script>
export default{
  data(){
    return{
    testimonialData: [
      {
        name: 'W',
        comments: 'It was great.',
        stars: 5
      },
      {
        name: 'Tom',
        comments: 'Easy to use.',
        stars: 4
      },
      {
        name: 'Has',
        comments: 'Test',
        stars: 3
      }
    ],
    number: 0
  }
  },
  methods:{
    increment: function(){
      this.number ++;
    },
  },
}
</script>

【问题讨论】：

codepen.io/Kradek/pen/aGPrVX?editors=1010
非常感谢这段代码。它帮助很大。

标签： javascript html visual-studio vue.js nuxt.js

【解决方案1】：

希望这会有所帮助！

new Vue({
  el: "#app",
  data(){
    return{
    testimonialData: [
      {
        name: 'W',
        comments: 'It was great.',
        stars: 5
      },
      {
        name: 'Tom',
        comments: 'Easy to use.',
        stars: 4
      },
      {
        name: 'Has',
        comments: 'Test',
        stars: 3
      }
    ],
    counter: 0
  }
  },
  methods:{
		increment(){
			if((this.testimonialData.length - 1) === this.counter) {
				this.counter = 0;
			}
			else {
			 this.counter++;
			}
		}
  },
})

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<div id="app">
  <h3>{{testimonialData[counter].comments}}</h3>
  <hr>
  <button @click="increment">Increment</button>
</div>

【讨论】：

【解决方案2】：

看看这个。

new Vue({
  el: "#app",
  data() {
    return {
      testimonialData: [{
          name: 'W',
          comments: 'It was great.',
          stars: 5
        },
        {
          name: 'Tom',
          comments: 'Easy to use.',
          stars: 4
        },
        {
          name: 'Has',
          comments: 'Test',
          stars: 3
        }
      ],
      counter: 0
    }
  },
  methods: {
    increment() {
      //for generic if(this.counter === this.testimonialData.length - 1)
      if (this.counter == 2)
        this.counter = 0;
      else
        this.counter++;

    }
  },
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app">
  <button class="next" @click="increment"> > </button>
  <h3>{{testimonialData[counter].name}}</h3>
  <h4>"{{testimonialData[counter].comments}}" with
    <span>{{testimonialData[counter].stars}} star/s.</span>
  </h4>
</div>

【讨论】：