how to access value from custom attr in vuejs

0
votes

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

2
vue.jsasp.net-core
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

2 Answers

2
votes

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")
0
votes

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.