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

Conceal the scroll bar while the page preloader is active

Error: The configuration property is not defined, causing a TypeError at Class.run ~/node_modules/angular-cli/tasks/serve.js on line 22

creating dynamic column headers with JavaScript

Locate the Next Element Based on its Tag Name

Using jQuery code within PHP pages is a convenient and powerful way to

Determine line-height and adjust positions using JavaScript in the Chrome browser

Which is better: using multiple makeStyles or just one in Material UI?

Datatables ajax response not loading data into table

button that takes you back to the top of a mobile website

Monitor the DOM for visibility changes in Selenium WebDriver and PjantomJS before proceeding

"Is it possible to use a Twitter widget with Mootools

Mastering the Art of jQuery Post with Iteration and Result Utilization

Using the feColorMatrix SVG filter in CSS versus applying it in JavaScript yields varied outcomes

Having trouble locating the bootstrap import statement

Quickest method for sorting an array of objects based on the property of another object's array

I'm puzzled as to why my recursive function is repeatedly calling itself without meeting the necessary logical condition. Can anyone provide guidance on

There are no errors in the HTML markup, however, there is an issue where the client-side rendered virtual DOM tree does not align with the

The CORS middleware seems to be ineffective when used in the context of Node.js

Utilizing JQuery to Modify XML File Content

Fetching data from local JSON file is being initiated twice