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="Your_email#gmail.com"
data-val="true"
data-val-required="The Email field is required."
id="Email"
name="Email"
class="form-control">
thanks
You can use the Vuejs ref attribute.
<input type="email" ref="myInput"
placeholder="Your_email#gmail.com"
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")
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.
Related
I went through many examples of VeeValidate forms.
All of them seem to focus only on the validation part and they use the initial-values attribute.
As far as I understand this can only use static data but in my case I use async API call in onMounted to load an object (with nested objects and arrays).
How do I populate the form with the data from API once it has been loaded?
The way that is closest to normal Vue is to use v-model directly on Field components.
The example from the docs that is most relevant is this one:
<Field type="text" name="name" v-model="name" />
Or if you need more complex fields:
<Field v-model="name" type="text" name="name" v-slot="{ field }">
<input v-bind="field">
</Field>
I'd like to know if it's possible to have a component communicate with a v-model within a slot?
<medical-form>
<input type="text" v-model="dob" />
</medical-form>
In this example the dob data is defined in the medical-form component. The contents of the slot are generated server side as it uses sensitive information to work out which fields should be presented, because of this I can't fully move the form into the medical-form component.
Yes you can give slot-scope and you will get the data
In your medical-form component bind your dynamic value.
<slot :dob="dob" />
<medical-form>
<template slot-scope="{dob}">
<input type="text" v-model="dob" />
</slot>
</medical-form>
But recently vue deprecated using of slot-scope but it is backward compatible and will work. However I would like to show you that also.
Reference - https://v2.vuejs.org/v2/guide/components-slots.html
<medical-form>
<template v-slot="{dob}">
<input type="text" v-model="dob" />
</template>
</medical-form>
this is my wrong code:
<input v-model="input.nameInput" type="text" :value="name" autocomplete="off" class="form-control">
<input v-model="input.posInput" type="text" :value="pos" autocomplete="off" class="form-control">
i can display the {{name}} and the {{pos}} outer of and its work. but if v-model and :value merged, error:
v-bind:value="name" conflicts with v-model on the same element because the latter already expands to a value binding internally
so what is the correct way? thanks
value is the same as v-model, v-model however updates on input where value does not.
There have been a few times I've used value over v-model but if you do this you would have to watch on input and change and update the value using a function instead.
do the following for this.
<input v-model="input.nameInput" type="text" autocomplete="off" class="form-control">
<input v-model="input.posInput" type="text" autocomplete="off" class="form-control">
Remove the value and keep the v-model.
You shouldn't use both v-bind and v-model on the same element. Consider the following code:
<label>
Input with v-bind
<input v-bind:value="message" />
</label>
<label>
Input with v-model
<input v-model="message" />
</label>
<p>{{ message }}</p>
The input with v-bind:value="message" (or it's shorthand, :value="message" will do the exact same), implements one-way binding. Any changes done to the "message" variable will be updated in this input, but changes done in the v-bind input will not change the message variable.
The input with v-model="message" has two-way binding. This means that changes to the input will reflect the message variable, but changes to the message variable will also reflect on the input. If you're building a form in vue, this type of binding is usually the way to go.
I made a JSFiddle where you can test both types of binding.
If your intention with both a v-bind and a v-model was to set a default value to your input field, you can set this value in the component's data.
data: {
message: 'My default value',
}
Or, if your fields are managed by a parent component (via props), you can set the initial value with default: "My default value".
props: {
message: {
type: String,
default: 'My default value',
},
}
I am trying to create a step-by-step form using Components & Routing. If there is a better or easier approach to do this, please feel free to suggest, since I am new to Vue.js.
I have a and 3 templates.
<template id="step-1">
<h1>Welcome to Form</h1>
</template>
<template id="step-2">
<label>Name:</label>
<input type="text" name="name" v-model="name" />
<br />
<label>Email:</label>
<input type="email" name="email" v-model="email" />
</template>
<template id="step-3">
<p>Review:</p>
<!-- Display Step 2 Form Values -->
{{ name }}
{{ email }}
<button>Submit</button>
</template>
What I want to do is, display the input values on #step-3, and on a button click, submit the form via an ajax call.
You can view the Fiddle from here: https://jsfiddle.net/j7mwc9wk/
One way to do this is for all three components use the same data object. For the purposes of this bit of code it can be a simple javascript object. A bit more sophisticated approach is to use Vuex an official Vue data store.
You could also have these three components have the same parent in which case name and email would be properties of parent data method and therefore accessible to all children. I don't know how this would work with Vue router but it should be fine.
Using a Parent.of resolver on a custom binding behavior does not work.
The DI container received by the resolver is the root container. This stops it from finding the correct parent to inject.
Using a custom attribute with the same Parent.of decoration works as expected.
An HTML snippet:
<form cs-validate-context="login">
<div class="ui two column grid">
<label class="column" t="branchcode"></label>
<div class="form-group ui input column">
<input type="text" t="[placeholder]branchcode" value.bind="branchcode & csValid" cs-valid="x">
</div>
The cs-validate-context gets injected correctly with Parent.of resolver into the attribute, cs-valid, but not the custom binding, csValid.
Is this expected or is it a matter of RT*M ?
An aurelia attribute do get the correct parent injected.
So I used it instead of the aurelia binding.