0

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

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>

1 ответ 1

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>

2

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.