I'm attempting to create a custom typing program for one of my students using SVG to display the words and class binding with Vue.js. The goal is to change the color of the characters when the correct key is pressed by the user. However, I've encountered an issue as it's not working as expected. Can anyone help me identify where I made a mistake?
Interestingly, when I manually make changes to the array with a button click, it functions properly. Additionally, when I log the array after a key press event, the array is updated; yet, the character color remains unchanged!
export default {
data(){
return{
word:["a","p","p","e","l","m","o","e","s"],
letterId:0,
kleur:[false,false,false,false,false,false,false,false,false],
}
},
methods:{
checkLetter(event){
console.log('key pressed: ' + event.which)
console.log('letter' +this.letterId+' is: ' + this.letter)
if(event.key == this.letter){
console.log("correct key was pressed")
this.kleur[this.letterId] = true
this.letterId++
}
}
},
computed:{
letter(){
//determine which letter is expected
return this.word[this.letterId]
},
viewbox(){
//adjust viewbox according to the length of the word
var width = (this.word.length * 50) + 50
return "0 0 "+width + " 70"
}
},
created: function () {
window.addEventListener('keyup', this.checkLetter)
},
}.green{
font: bold 35px Courier;
fill:green;
}
.normaal{
font: bold 35px Courier;
fill:black;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<template>
<div>
<svg :viewBox="viewbox" width="100%">
<text v-for="letter,index in word" :x="index*40" y="45" :id="index" :class="{green:kleur[index], normaal:!kleur[index]}">{{letter}}</text>
</svg>
</div>
</template>