Vue2将类添加到重点输入

Question

froI have a form with many inputs and I want to add a class to focused input label tag and remove class when another input selected.

I make such code

  onInputSelected: function(e) {
     var label =  e.target.previousElementSibling;
     label.classList.add('highlight');
  }

but how can I remove class from one input and add to another when I change focus?

Updated:

I found solution but looks like it's to complicated :)

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);
     }
}

Answer 1

First of all you're not being very clear what you want to do. 2nd of all you have found solution so just clean up your code. 3rd of all I'd try using el.closest.

const input = document.getElementById('yourInput');
const label = input.closest("label");
// or if you want to add ids to labels
const label2 = input.closest("#yourLabel");

Link to docs

With this solution you will be little bit more save. Couse in yours, lets just imagine that somebody change HTML structure... Then very high risk your code stops working.