动态类绑定 svg 和 vue 不起作用答案

【问题标题】：Dynamic class binding svg and vue not working动态类绑定 svg 和 vue 不起作用
【发布时间】：2019-09-17 19:21:14
【问题描述】：

我尝试为我的一个学生制作一个打字程序。我使用 SVG 生成单词，并使用与 vuejs 的类绑定。当用户按下右键时，字符的颜色应该会改变。但由于某种原因，它不起作用。谁能告诉我哪里出错了？

当我将更改分配给数组时，只需单击按钮，它就会起作用。当我在按键后 console.log 数组时，数组改变了，但字符的颜色没有！

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>

【问题讨论】：

我不确定这个模板中的什么是反应式的？这样看：有一个观察者检查你的 DOM 是否需要重绘。而且，如果您更改 Array 内部的内容，则没有任何改变。您的模板中没有任何更改。如果您要在

标签： javascript vue.js svg

【解决方案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++
            }
        }

【讨论】：

感谢您的回答，但即使有 @keyup 事件，颜色也不会更新。所以肯定还有其他问题
是的，我做到了。它还抛出这个错误``` Uncaught TypeError: Cannot read property 'which' of undefined at VueComponent.checkLetter (pages_stan.._pages_stan.vue.1.js:40) at keyup (pages_stan.._pages_stan.vue.1.js :113) ```
检查我的新答案 c;

【解决方案2】：

我找到了解决方案。但我不明白它为什么起作用。我刚刚在我的数据中添加了一个名为“test”的变量。在 checkletter 方法中，我添加了一行将测试变量分配给字符串化数组，如下所示

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，用于输出测试值。

【讨论】：