Unlocking elements in Vue.js through functions

Question

Unlocking elements in Vue.js through functions

Looking to dynamically add a class to the label element when focusing on an input element below it. The current HTML and JS code I'm using is as follows:

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

Wanting to enhance this functionality by removing the ref attribute and toggling the js-focused class directly from the selected element. Any ideas on how to select the closest label element and modify its class?

javascript vue.js vuejs2

Answer 1

Answer №1

A more efficient approach involves utilizing dynamic classes. Take a look at 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>

Implement this with components 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>

Answer 2

A more efficient approach involves utilizing dynamic classes. Take a look at 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>

Implement this with components 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>

Answer 3

Answer №2

You can utilize the previousElementSibling property in combination with event.target.

For instance:

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>

Answer 4

You can utilize the previousElementSibling property in combination with event.target.

For instance:

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>

Unlocking elements in Vue.js through functions

Answer №1

Answer №2

Similar questions

Divs animated with jQuery keep on moving even after the animation has finished

Can you identify the HTML table format and suggest effective web scraping methods?

Looking to incorporate CGST and SGST into the Subtotal using JQuery?

What are the steps to ensure that all resources are localized?

Set up a Bootstrap date picker to populate two input boxes with a start and end date. Additionally, disable the ability for the date value to change

Conquering Challenges Across Multiple Disciplines

"Unleashing the Power of AngularJS: Implementing a Global Error Handler to Display and

What is the best way to create a Laravel object for use in JavaScript in a Laravel Blade?

Opencart: The Key to Your Website's Success

Unable to delete a dynamically inserted <select> element by using the removeChild method

MUI: Autocomplete cannot accept the provided value as it is invalid. There are no matching options for the input `""`

Running a Node.js script on an Express.js server using an HTML button

Guide to adding a URL link to an image tag in Vuetify and Nuxt.js

Error: Cannot read property 'X' of undefined in JavaScript when using Django framework

Pass information from Vue JS v-for to a button when it is clicked

Sending JSON array from PHP to jQuery AJAX

Encasing newly inserted child components within my designated slot

Changing class names when removing an element from an array

The challenge of harmonizing variables in PHP and JavaScript

Cutting out the lowest identification that is not a certain object