how to access value from custom attr in vuejs

Question

I am working on my firs Vue project with ASP.NET Core. In this project, I have an input box and because I am using asp MVC validation. I am transferring error message from the server in the data-val-required attr.

Not I also using vuejs from clientside functionality and I want to validate the form in vuejs. Which is working fine but I want to reuse this same error message which available in data-val-required

so can anyone please tell the how to access value from custom attr in vuejs

<input type="email" 
placeholder="[email protected]" 
data-val="true" 
data-val-required="The Email field is required." 
id="Email" 
name="Email" 
class="form-control">

thanks

Maybe you should take a look at VeeValidate: github.com/logaretm/vee-validate this can trigger errors based on front-end and you can also trigger it manually after returning a error message. — Niels Lucas
– Niels Lucas, Commented Sep 5, 2019 at 7:26

tony19 · Accepted Answer · 2022-07-16 00:00:54Z

2

You can use the Vuejs ref attribute.

<input type="email" ref="myInput" 
    placeholder="[email protected]" 
    data-val="true" 
    data-val-required="The Email field is required." 
    id="Email" 
    name="Email" 
    class="form-control">

and then, to retrieve the element's attribute:

this.$refs.myInput.getAttribute("data-val-required")

edited Jul 16, 2022 at 0:00

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Sep 5, 2019 at 7:25

Fab

4,6572 gold badges26 silver badges47 bronze badges

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

Comments

tony19 · Accepted Answer · 2022-07-16 04:58:14Z

0

You can use vm.attrs

Contains parent-scope attribute bindings (except for class and style) that are not recognized (and extracted) as props. When a component doesn’t have any declared props, this essentially contains all parent-scope bindings (except for class and style), and can be passed down to an inner component via v-bind="$attrs" - useful when creating higher-order components.

edited Jul 16, 2022 at 4:58

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Sep 5, 2019 at 7:47

Estradiaz

3,5831 gold badge13 silver badges22 bronze badges

Collectives™ on Stack Overflow

how to access value from custom attr in vuejs

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related