I have a form that contains multiple input fields, and I want to dynamically add a class to the label tag of the focused input and remove it when another input is selected.
Initially, I tried the following code:
onInputSelected: function(e) {
var label = e.target.previousElementSibling;
label.classList.add('highlight');
}
However, I later realized that I needed to remove the class from one input and add it to another when the focus changes.
Update:
I managed to find a solution, but it seems a bit complex :)
data: {
allInputs: document.getElementsByTagName('input')
},
methods: {
onInputSelected: function(e) {
e.target.previousElementSibling.classList.add('highlight');
[].forEach.call(this.allInputs, function (currentValue, index) {
if(currentValue.name == this.name) {
return;
}
currentValue.previousElementSibling.classList.remove('highlight');
}, e.target);
}
}