Vue.js Как сделать навигацию стрелками

Question

Есть данные со списком вопросов и ответов

questions=[
 {
  questiontext:"",
  answers:[1,2,3,4]
 },
 {
  questiontext:"",
  answers:[1,2,3,4]
 }
]

и две кнопки стрелка влево и вправо Нужно по нажатию стрелки вправо выводить следующий вопрос, по нажатию стрелки влево предыдущий вопрос

<template>
  <div class="header">
    <div class="wrapper"> 
      <div class="header__options">
        <button @click=' setRedirectBack(true)'>
          <font-awesome-icon icon="times" />
        </button>
        <button @click='setQuestion(question - 1)' >
          <font-awesome-icon icon="arrow-left" />           
        </button>        
      </div>  
        <h2 class="game-card__title">{{ $route.params.id}}</h2>  
        <button @click='setQuestion(question + 1)'>
          <font-awesome-icon icon="arrow-right" />           
        </button>       
      </div>
      <div class="game-card">
    </div> 
  </div>
</template>
<script>
import Vuex from 'vuex';
import { mapState} from 'vuex'; 
import firebase from 'firebase';
export default {
  name: "Questions",
  props: {               
  },
 methods: {   
     setRedirectBack(){},
     setQuestion(){}
  computed:{
  ...mapState([            
         'questions'         
    ]),    

  },
  created: function() {    
  this.$store.dispatch('initQuestions')
  },  
};
</script>

Answer 1

new Vue({
  el: "#app",
  data: function () {
    return {
       questions : [
       {
        text:"first",
        answers:[1,2,3,4]
       },
       {
        text:"second",
        answers:[1,2,3,4]
       },
       {
        text:"third",
        answers:[1,2,3,4]
       }
		],
      current : 0
    }
  },
 
  methods: {
    nextQuestions: function(){
    	if( this.current < this.questions.length - 1)
      	this.current++   
    },
    prevQuestions: function(){
    	if( this.current > 0)
      	this.current--  
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div id="app">
  <div class="main"> 
   <div style="margin: 10px">
     questions № {{ current + 1 }}
   </div>
   <div style="margin: 10px">
     text  : {{ questions[current].text }}
   </div>
   <div style="margin: 10px">
     <button style="margin-right: 10px; background-color: AliceBlue"
         @click=" prevQuestions" :disabled="current == 0">
       &lt;- 
     </button>
     <button style="background-color: AliceBlue" 
        @click="nextQuestions" :disabled="current == this.questions.length - 1">
       -&gt; 
     </button>
     	
   </div>
  </div>
</div>
</body>
</html>

БЛОГ НА HUSL

Vue.js Как сделать навигацию стрелками

Ответы (1 шт):