Vue.js accessing element via function

Question

I need to add class to label element when I focus on an input element which is below the label. My current solution is this:

HTML:

<label for="formProductId" ref="productIdLabel" class="form-element-title">Product ID</label>
<input id="formProductId" @blur="toggleFocus('productIdLabel', false)" @focus="toggleFocus('productIdLabel', true)" v-model="filterValues.productId" :name="filterOptions.productId === true ? 'productId' : false" type="text">

JS:

toggleFocus(ref: string, enable: boolean) {
    if (enable) {
        (this.$refs[ref] as HTMLElement).classList.add("js-focused");
    } else {
        (this.$refs[ref] as HTMLElement).classList.remove("js-focused");
    }
}

I would like to remove the ref attribute and toggle js-focused class completely by the selected element itself. How do I select the closest label element and edit it's class?

Kalimah · Accepted Answer · 2020-05-25 13:54:55Z

1

A better approach is to use dynamic class. See this example:

new Vue({
  el: '#app',
  data: {
    productIdLabel: false
  }
})

.js-focused {
  background-color: lightblue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id='app'>
  <label for="formProductId" class="form-element-title" :class="{'js-focused': productIdLabel == true}">Product ID</label>
  <input id="formProductId" @blur="productIdLabel = false" @focus="productIdLabel = true" type="text">
</div>

Use with component and multiple form inputs:

Vue.component("form-label", {
  template: `<div>
	  <label :for="info.id" class="form-element-title" :class="{'js-focused': isFocused == true}">{{info.label}}</label>
   <input :id="info.id" @blur="isFocused = false" @focus="isFocused = true" type="text">
	</div>`,
	props: ["info"],
	data: function(){
		return {
			isFocused: false
		}
	}
})
new Vue({
  el: '#app',
  data: {
    form: [{
      label: "Product Id",
      id: "formProductId"
    }, {
      label: "Another Element",
      id: "anoterId"
    }, {
      label: "Third Element",
      id: "thirdId"
    }]
  }
})

.js-focused {
  background-color: lightblue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id='app'>
  <form-label v-for='el in form' :info='el'></form-label>
</div>

edited May 25, 2020 at 13:54

answered May 25, 2020 at 13:44

Kalimah

11.5k11 gold badges48 silver badges86 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

The50 Over a year ago

Isn't it a bad practice to have a variable for each label? I have a number of labels and inputs on my component so I would need a variable for each label.

Kalimah Over a year ago

Not necessarily. It might make your code unmaintainable. If you have number of form elements you can use a component and then iterate your form data over it. The component will have one variable for focus. I will update my answer.

kwyntes · Accepted Answer · 2020-05-25 13:36:56Z

1

You can use previousElementSibling with event.target.

Example:

new Vue({
  el: '#app',
  methods: {
    toggleLabelColor(event) {
      event.target.previousElementSibling.classList.toggle('input-focused')
    }
  }
})

input {
  display: block;
}

.input-focused {
  color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <label>I turn green when focused.</label>
  <input @focus="toggleLabelColor" @blur="toggleLabelColor">

  <label>I turn green when focused.</label>
  <input @focus="toggleLabelColor" @blur="toggleLabelColor">

  <label>I turn green when focused.</label>
  <input @focus="toggleLabelColor" @blur="toggleLabelColor">
</div>

answered May 25, 2020 at 13:36

kwyntes

1,32213 silver badges33 bronze badges

Collectives™ on Stack Overflow

Vue.js accessing element via function

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related