我尝试为我的一个学生制作打字程序。 我使用SVG生成单词,并将类绑定与vuejs结合使用。 当用户按下右键时,字符的颜色应该改变。 但是由于某种原因,它不起作用。 有人可以告诉我我哪里出问题了吗?
当我将更改分配给阵列时,单击按钮即可正常工作。 当我在按键后用console.log记录数组时,数组被更改了,但是字符的颜色却没有!
## Check Model Like: ##
- @if(Model != null && Model.Count() != 0)
{
foreach (var o in Model.Results)
{
---------
}
}
## Check Record Like: ##
if(o.Person!=null)
{
-----------
}
let open = require('amqplib').connect('amqp://localhost:5672')
open.then(function (conn) {
return conn.createChannel()
}).then(function (ch) {
return ch.assertQueue(q).then(function (ok) {
ch.sendToQueue(q, Buffer.from(JSON.stringify(data)))
return ch.close()
})
}).catch(console.warn)
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)
},
}
答案 0 :(得分:0)
看。我只是改变了一切。
将此添加到您的方法中。并将其从计算中删除。
//finds the letter in the array and returns it
letter(letter){
return this.word.find(element => {
return element == letter;
})
},
然后我将checkLetter更改为此
checkLetter(event){
console.log('eventkey: ' + this.letter(event.key));
//if it finds it then the correct key wes pressed.
if(event.key == this.letter(event.key)){
console.log("correct key was pressed")
this.kleur[this.letterId] = true
this.letterId++
}
}
答案 1 :(得分:0)
我找到了解决方案。但是我不明白为什么它起作用。 我刚刚在数据中添加了一个名为“ test”的变量。 在checkletter方法中,我添加了一行以将测试var分配给字符串化数组,像这样
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
//modification
this.test = this.kleur.toString()
this.letterId++
}
}
在html模板中,我还添加了一个隐藏的div,用于输出测试值。