Vue 2.0 Hello World

by dirkk0

HTML

<script src="https://unpkg.com/vue"></script>

<div id="math-captcha">
  <p>
    Um weiter zu kommen, musst Du eine kleine Rechenaufgabe lösen:
    <p>{{ challenge }}</p>
    <input v-model="answer">
  </p>
  <p>{{ assessment }}</p>
  <p v-if="correct"><a href="wdr.de">WDR</a></p>
</div>

JavaScript

var mathCaptcha = new Vue({
  el: '#math-captcha',
  data: {
    randomNum1: 0,
    randomNum2: 0,
    total: 0,
    challenge: '',
    answer: '',
    assessment: 'Trage die richtige Antwort ein!',
    correct: false
  },
  watch: {
    // whenever answer changes, this function will run
    answer: function(newAnswer, oldAnswer) {
      this.getAnswer()
    }
  },
  created: function() {
    this.randomNum1 = this.getRandom()
    this.randomNum2 = this.getRandom()
    this.total = this.randomNum1 + this.randomNum2

    this.challenge = this.randomNum1 + " + " + this.randomNum2 + "="
  },
  methods: {
    getAnswer: function() {
      this.correct = parseInt(this.answer) === this.total
      if (this.correct) {
        this.assessment = 'Richtig!'
      } else {
        this.assessment = 'Das ist leider noch nicht richtig.'
      }
    },
    getRandom: function() {
      return Math.ceil(Math.random() * 20)
    }
  }
})