vue-프로젝트 : 단어시험장(2일차)

 단어 시험 만들기

// spanish.vue

<template>
  <div>
    <br />
    <form v-on:submit="test">
      <div v-if="hide">
        {{word.day1[numberTest][1]}}
      </div>
      <br />
      <input type="text" v-model="value" />
      <button type="submit">입력</button>
    </form>

    <div v-if="stop">
      맞은 개수 : {{yes}} <br />
      틀린 개수 : {{no}} <br />
    </div>

    <tr v-for="(stupid, index) in stupid" v-if="stop">
      오답 :  : {{stupid}}
    </tr>


    <button v-on:click="show"> 보여줭!!</button>
    <tr v-for="(fail, index) in check" v-if="master">
      정답 : {{index+1}} : {{fail[0]}} : {{fail[1]}}
    </tr>


  </div>
</template>

<script>
import word from '../json/word.json'

export default {
  data(){
    return {
      word: word,
      value: '',
      numberTest: 0,
      yes:0,
      no:0,
      stop: false,
      hide: true,
      check: [],
      stupid: [],
      master: false
    }
  },
  methods:{
    test(e){
      e.preventDefault();

      if(this.word.day1[this.numberTest][0] === this.value){
        this.numberTest++;
        this.yes++;
        if(this.numberTest === 10){
          this.finished()
        }

      } else {
        this.check.push(this.word.day1[this.numberTest])
        this.stupid.push(this.value)
        this.numberTest++;
        this.no++
        if(this.numberTest === 10){
          this.finished()
        }
      }
    },
    finished(){
      this.stop = true;
      this.numberTest = 0;
      this.hide = false;
    },
    show(e){
      e.preventDefault();
      this.master = true;
    }
  }
}
</script>

<style scoped>
</style>