Vue.js component is like below.
<template>
<div class="container">
<input type="text" name="first_name" v-validate data-vv-rules="min:12">
</div>
</template>
<script>
export default {
props: ['messages']
}
</script>
In the above component, messages property is an object with one property with value like this:
this.messages.Min_Length_First_Name: 3
I am trying to assign it like below.
<input type="text"
name="first_name"
v-validate
data-vv-rules="min:this.messages.Min_Length_First_Name">
But, the input tag renders the min value = this.messages.Min_Length_First_Name instead of numeric value
Am I missing anything?
You should not use this in the template. It's automatically inferred
:data-vv-rules="`required|alpha|min:${messages.Min_Length_First_Name}|max:15`
Related
Is it possible to use the value of a prop as the input's v-model?
I normally do the following when creating an input:
<template>
<form>
<input v-model="form.email" type="email"/>
</form>
</template>
<script>
export default {
data() {
return {
form: {
email: '',
}
}
}
}
</script>
But now I'm trying to achieve the following where this.myProp is used within the v-model without being displayed as a string on the input:
<template>
<form>
<input v-model="this.myProp" type="email"/>
</form>
</template>
<script>
export default {
props: ['myProp'] // myProp = form.email for example (to be handled in a parent component)
}
</script>
Yes, but while using it in parent component. In child component you need to extract value and #input instead of using v-model (v-model is shortcut for value="" and #input) Here is an example of input with label, error and hint in Vue 3 composition API.
BaseInput.vue
<template>
<div class="flex flex-col">
<label>{{ label }}</label>
<input v-bind="$attrs" :placeholder="label" :value="modelValue" #input="$emit('update:modelValue', $event.target.value)">
<span v-for="item of errors" class="text-red-400">{{ item.value }}</span>
<span v-if="hint" class="text-sm">{{ hint }}</span>
</div>
</template>
<script setup>
defineProps({ label: String, modelValue: String | Number, errors: Array, hint: String })
defineEmits(['update:modelValue'])
</script>
Using v-bind="$attrs" you target where attributes like type="email" need to be applied in child component. If you don't do it, it will be added to the top level DOM element. In above scenario <div>.
ParentComponent.vue
<BaseInput type="email" v-model="formData.email" :label="Email" :errors="formErrors.email"/>
I am newbie in VueJs.
I want to create customize component with wrapper like this:
template: `<div class="wrapper">
<input name="name" />
</div>`,
when using component, I want to add v-model,
<my-component v-model="form.input" />
But in actually, the value of model is bind just to the wrapper not to the input. If I change the model
form:{ input: "edited" }
that value only bind to wrapper like:
<div class="wrapper" value="edited">
<input name="name" />
</div>
is there any suggestion for my problem.
I am using Vuejs-2.
At minimum, you would need to do something like this:
<div class="wrapper">
<input
:value="value"
#input="$emit('input', $event.target.value)"
/>
</div>
props: ['value']
I Was using a simple text area in my vue component.:
<input v-model="someRootProperty"/>
I would like to encapsulate this input inside another component, for instance
<template>
<div>
<div>...</div>
<input v-model="???"/>
</div>
</template>
I would like to use
<my-component v-model="someRootProperty" />
instead and them bypass this to the input inside the component.
What should I do inside the component to expose its input v-model as the component v-model?
<input v-model="someRootProperty"/>
Is the same as (syntactic sugar):
<input :value="someRootProperty" #input="someRootProperty = $event.target.value"/>
That means that you could accept value as a prop in the component and emit input to achieve the same thing.
MyComponent.vue
<template>
<input :value="value" #input="$emit('input', $event.target.value)>
</template>
<script>
export default {
props: ['value']
}
And then use it like this.
<MyComponent v-model="someRootProperty"/>
Let's start from this
<div class="form-group" :class="{'has-error':determineError('content')}">
<label>Content Label</label>
<div class="mandat">*</div>
<input v-model="form.content" name="content" v-validate="'required|min:5|max:100'" class="form-control">
</div>
The first thing I would like to obtain is to put this piece of code somehow inside a component, something like this:
Vue.component('form-group', {
...
template: `<div class="form-group" :class="{'has-error':determineError('content')}">
<label>Content Label</label>
<div class="mandat">*</div>
<input v-model="form.content" name="content" v-validate="'required|min:5|max:100'" class="form-control">
</div>`
});
As you can see I still have the input field right there. What I would like to do is pass any piece of code instead and the current component must inherit parent's context.
Something like
<form-group>
<template>
<input v-model="form.content" name="content" v-validate="'required|min:5|max:100'" class="form-control">
</template>
</form-group>
How can this be achieved? Notice that I still use parent's context. If using parent's context is not possible, then how can I achieve this in the simplest way?
You have to use slots, which are expanded in the component template with the contents passed by the parent.
In the form-group component:
<template>
<div class="form-group" :class="{'has-error':determineError('content')}">
<label>Content Label</label>
<div class="mandat">*</div>
<slot v-bind:form="form"></slot>
</div>
</template>
You can also add a fallback content inside the <slot> (a default input maybe). Note we are passing the context for the slot contents (see Scoped Slots).
I have a component:
<slot name="test" :name="name">
<input type="text" v-model="name">
</slot>
The input is bound to name in data.
When I use the slot in the parent:
<div slot="test" slot-scope="props">
<input type="text" v-model="props.name">
</div>
Data does not update on the child. It's not linked - why?
What you are seeing is actually the parent's default <input>. So you understand what I mean, add some text to both, like:
<slot name="test" :name="name">
Default: <input type="text" v-model="name">
</slot>
<div slot="test" slot-scope="props">
Actual: <input type="text" v-model="props.name">
</div>
You'll see that what appears is the default.
Now, that happens because, it seems like a bug, when the slot prop has the same name as the parent's, the slot does not work.
Workaround: rename the slot prop.
In the example below, I renamed it from name to namex. Notice the v-model in the default remains the same name because anything in the template refers to the props of that template (in other words, slot props, e.g. namex, will never be available in the parent default slot).
<slot name="test" :namex="name">
Default: <input type="text" v-model="name">
</slot>
<div slot="test" slot-scope="props">
Actual: <input type="text" v-model="props.namex">
</div>
to use v-model in scoped slots, the value of v-model must be one level deeper:
Vue.component('render-props', {
data: () => ({message: 'hello', obj: {msg: 'obj_msg'}}),
template: `<div>
<slot name="a" :message="message">
default: {{message}}
<input v-model="message"/>
</slot>
<slot name="b" :obj="obj">
default: {{obj.msg}}
<input v-model="obj.msg"/>
</slot>
</div>`
});
new Vue({
el: "#root",
template: `<div>
<render-props>
<template v-slot:a="props">
actual: {{props.message}}
<input v-model="props.message"/>
</template>
<template v-slot:b="props">
actual: {{props.obj.msg}}
<input v-model="props.obj.msg"/>
</template>
</render-props>
<cus_2 />
</div>`
});
you are not supposed to modify the data you pass to a slot, pretty
much like a prop. You should pass a method instead to change tha
value. You can always pass an object and modify a property (like a
prop) but it's also not recommended
-from https://github.com/vuejs/vue/issues/9726
So I imagine something like
<template>
<slot v-bind:value="value"></slot>
</template>
<script>
export default {
name: 'FooBar',
data() {
value: '',
},
methods: {
updateValue(e) {
this.value = e.target.value;
}
},
};
</script>
Then when using the component <FooBar> instead of using v-model, you can use the passed scoped slot props, the method (updateValue), and actual prop that will be updated, value.
<FooBar v-slot="slotProps">
<input type="text" :value="slotProps.value" #input="slotProps.updateValue" />
</Foobar>