Level 46
You'll need to share some code.
Dec 10, 2017
2
Level 3
Style binding not updating properly
Hello I made a component that contains a field with a dynamic style. The component is something like a quiz. The user has to solve mathematical tascs (simple multiplication). The answer is submitted by hitting enter.
Here's the problem: a correct answer should become green, a wrong answer red. The computed property is updating correctly and even the element class seems to update but the UI doesn't update. The color only changes when I click anywhere on the screen.
Can someone say what I'm doing wrong or how I can make it better?
Thank you!
Level 3
This is the input field :
input v-if="this.inputLocked" id="input1" type="text" @keyup.enter="submitResult"
:class="this.resultCSSClass" ref="resultField"
v-model="inputResult" disabled>
input v-else="this.inputLocked" id="input1" type="text" @keyup.enter="submitResult"
:class="this.resultCSSClass" ref="resultField"
v-model="inputResult" v-focus>
The computed property:
resultCSSClass() {
if (this.resultIsCorrect == 'empty')
return 'result-empty';
if (this.resultIsCorrect == false)
return 'result-false';
if (this.resultIsCorrect == true)
return 'result-correct';
},
The event handler function for keyup.enter:
submitResult() {
let correct = this.checkResult();
if (!this.beginnermode) {
this.pushResult();
this.goNext();
}
else {
if (correct) {
this.pushResult();
this.goNext();
}
else {
this.attempts++;
this.inputResult = '';
}
}
}
The function that checks the result:
checkResult() {
this.taskEnd = Date.now();
if (this.inputResult == this.result) {
document.getElementById("input1").style.backgroundColor = "green"; // <- this is a workaround
this.resultIsCorrect = true;
this.points++;
return true;
}
else {
document.getElementById("input1").style.backgroundColor = "red"; //<- workaround
this.resultIsCorrect = false;
return false;
}
}
Please or to participate in this conversation.