Question

我尝试为我的一个学生制作打字程序。我使用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)
    },


}

Answer 1

看。我只是改变了一切。

将此添加到您的方法中。并将其从计算中删除。

//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++
            }
        }

Answer 2

我找到了解决方案。但是我不明白为什么它起作用。我刚刚在数据中添加了一个名为“ 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，用于输出测试值。

动态类绑定SVG和VUE不起作用

2 个答案: