Zero1000

Score-Vue

12: quiz(1)
1: quizの原型

1. 基本形

index.html
<meta charset="utf-8">

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<dir id="app">
{{cnt+1}}/{{len}}<br>


<h4 v-html=quiz[cnt].q > </h4>


<li v-for="(q,i) in quiz[cnt].a">

<button @click="bt(i)">{{q}}</button>

</li>




<hr>
{{quiz[cnt].c}}<br>
<button @click="up">up</button>


</dir>


<script>

new Vue({
	el:"#app",
	data:{
		cnt:0,
		quiz:[],		
	},
	
	methods:{
		up:function(){this.cnt +=1},
		
		bt:function(x){
	
			if( x==this.quiz[this.cnt].c  ){this.ok() }
			
			else{this.ng()}
			
		},
		
		ok:function(x){
			
			this.cnt +=1
			
		},
		
		ng:function(){alert("ng!")},		
	},
	
	mounted :function(){
	
		axios.get('https://zero1000.mixh.jp/quiz')
        .then(response => this.quiz=response.data )
        .catch(error => console.log(error))
        
        //this.len=this.quiz.length  
  	},
  	
  	
  	computed: {
      
    len: function() {
        return this.quiz.length
    }
  }
  	
})
</script>