主页 / 问题 / 1093820
Accepted
Evgenii Kantemirov
Asked:2020-03-12 20:56:18 +0000 UTC2020-03-12 20:56:18 +0000 UTC

Vue.js 如何制作导航箭头

  • 772

有问题和答案列表的数据

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>
vue.js

1 个回答

  1. Best Answer

    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>

    • 1

相关问题