How to add custom attribute for element using vue directives?

Question

I have custom attribute my-custom-attribute which contains the id for the element I need to add and remove this attribute depending on the boolean.

I already tried this code and it is working fine, is there any way to make it using vuejs directives? HTML:

<div my-custom-attribute="my_element">
...
</div>

JS:

const el = document.getElementById("some_id");
if(my_bool) {
   el.setAttribute("my-custom-attribute", "#my-element");
} else {
   el.removeAttribute("my-custom-attribute")
}

tony19 · Accepted Answer · 2022-07-15 02:40:04Z

1

You can register a directive as global using the below example, it provides you three lifecycle hooks for you to control the behavior, read the following and try to implement. Let us know if any problem occurs with your implementation and start a separate thread

https://v2.vuejs.org/v2/guide/custom-directive.html

Vue.directive('my-custom-directive', {
  // When the bound element is inserted into the DOM...
  inserted: function (el) {
    // Focus the element
    el.focus()
  }
})

edited Jul 15, 2022 at 2:40

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Feb 2, 2021 at 13:40

Satyam Pathak

6,9603 gold badges28 silver badges52 bronze badges

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

Collectives™ on Stack Overflow

How to add custom attribute for element using vue directives?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related