<b-col md="7" offset-md="1">
<b-form-group>
<template>
Time
<flat-pickr
id="time"
v-model="time"
class="form-control"
:config="timeConfig"
#blur="valTime"
/>
</template>
</b-form-group>
</b-col>
data() {
return: {
time: null,
timeConfig: {
dateFormat: 'Y-m-d H:i',
}
}
},
methods: {
valTime(e) {
console.log(e.target.value) // null
}
}
I am doing vuejs. I use #blur event in flatpickr it returns null, is there any way I can get the result, where did I go wrong, please advise. Thanks
flat-pickr emits the onChange event when the user selects a new date. The event handler (i.e., valTime() in this case) receives three arguments, but you can just use the first argument to get the selected date:
export default {
methods: {
valTime(selectedDates, dateStr, instance) {
console.log(selectedDates)
}
}
}
The vue-flatpickr-component docs describe how to listen to onChange:
<flat-pickr ⋯ #on-change="valTime" />
demo
Related
I need to use :value and v-model together. I've got a form and on the following component I'm receiving an 'age' as a query parameter because I'm filling a previous input somewhere else. I want that age to auto-populate the input on this component. But what if the user changes that value? I'd like to re-store that new age and emit it to the parent .Vue file. How can I do this?
In other words: what if I'm getting a '3' as the age, the auto-populated input shows a '3' but then the user notices they wanted to write '30' instead of '3'? How can I save 30 instead of '3'?
Thanks in advance
<template>
<div>
<p>age</p>
<input type="text" :value="age" v-model="age_keyup" #keyup="send()">
</div>
</template>
<script>
export default {
data: function () {
return {
age_keyup: null,
}
},
methods: {
send(){
this.$emit("age_keyup", this.age);
}
},
props: ['age']
}
</script>
No need to bind the value to that prop just init age_keyup based on age :
<template>
<div>
<p>age</p>
<input type="text" v-model="age_keyup" #keyup="send()">
</div>
</template>
<script>
export default {
data: function () {
return {
age_keyup:null,
}
},
methods: {
send(){
this.$emit("age_keyup", this.age_keyup);
}
},
props: ['age'],
mounted(){
this.age_keyup=this.age
}
}
</script>
I want to add #change event on custom input component.
This is my component:
<template>
<div class="w-100">
<div class="form-text">
<input
:value="value"
#input="updateValue($event.target.value)"
autocomplete="off"
class="form-text__input"
/>
</div>
</div>
</template>
<script>
export default {
name: 'FormText',
props: {
value: {
required: true,
type: String
}
},
methods: {
updateValue(value) {
this.$emit('input', value)
}
}
}
</script>
and this is how I use it:
<form-text
v-model="form.placeOfBirth"
/>
I want to add #change event. This event should fire when user start typing in input, not when data came from API and input were filled.
in the template:
<input
...
#keyup="onKeyUp"
/>
in the code:
methods: {
onKeyUp(event) {
this.$emit('change', event)
}
}
Please pay attention that this event will be fired after every pressed key.
I'm going to build a customized virtual keyboard, so that's the first problem I've encountered.
I have an input element, whose value is changed from outside, in my case by pressing a button. The problem is that there seems to be no way to trigger the normal 'change' event.
Neither clicking outside the input, nor pressing Enter gives any result. What might be the correct way of solving this problem?
<template>
<div class="app-input">
<input #change="onChange" type="text" v-model="value" ref="input">
<button #click="onClick">A</button>
</div>
</template>
<script>
export default {
name: "AppInput",
data() {
return {
inputDiv: null,
value: ""
};
},
props: {
msg: String
},
methods: {
onClick() {
this.value = this.value + "A";
this.inputDiv.focus();
},
onChange() {
alert("changed");
}
},
mounted() {
this.$nextTick(() => {
this.inputDiv = this.$refs.input;
});
}
};
</script>
The whole pen can be found here.
v-on:change would only trigger on a direct change on the input element from a user action.
What you are looking for is a wathcer for your data property, whenever your value changes, watcher will execute your desired function or task.
watch: {
value: function() {
this.onChange();
}
}
The watch syntax is elaborated on the provided official vuejs docs link. use your data property as the key and provide a function as a value.
Check the snippet.
export default {
name: "AppInput",
data() {
return {
inputDiv: null,
value: ""
};
},
props: {
msg: String
},
methods: {
onClick() {
this.value = this.value + "A";
this.inputDiv.focus();
},
onChange() {
alert("changed");
}
},
// this one:
watch: {
value: function() {
this.onChange();
}
},
// --- rest of your code;
mounted() {
this.$nextTick(() => {
this.inputDiv = this.$refs.input;
});
}
};
When I build any new vue application, I like to use these events for a search input or for other inputs where I don't want to fire any functions on #change
<div class="class">
<input v-model="searchText" #keyup.esc="clearAll()" #keyup.enter="getData()" autofocus type="text" placeholder="Start Typing ..."/>
<button #click="getData()"><i class="fas fa-search fa-lg"></i></button>
</div>
These will provide a better user experience in my opinion.
I'm trying to send form to certain action, based on select value.
I have such template:
<template>
<form method="post" :action="myRoute" ref="myForm">
<select #change="entitySelected" v-model="selected">
<!-- -->
</select>
</form>
</template>
I'm trying to set up form action dynamically when new select value is appeared:
<script>
export default {
data() {
return {
selected: '',
}
},
computed: {
myRoute: function () {
return 'example.com/'+this.selected
}
},
methods: {
entitySelected(event) {
console.log(this.$refs.myForm.action) //<- action is 'example.com' without selected value
console.log(this.selected) //<- this value is as expected
this.$refs.myForm.submit()
}
}
}
</script>
What's wrong?
P. S. Browser - Firefox
Probably not the best way, but it works:
userSelected(event) {
this.$nextTick(function () {
this.$refs.backdoor.submit()
})
}
You can use setAttribute() when updating the selected value :
this.$refs.myForm.setAttribute('action', this.myRoute);
I have a parent component and I am assigning values in child component form. But after submitting the form I want form field should be empty.
I am using resetFields function for resetting value but when I am using these function it is setting last value, what I send it from parent component instead of reset value I want form fields should be empty.
<script>
export default {
props: ["empData"],
data {
return() {
empInfo: {
name: "",
id: null,
age: null
}
}
},
methods: {
getUserData() {
if (response.status == "SUCCESS") {
this.$refs['empInfo'].resetFields();
}
}
}
watch: {
empData: immediate: true,
handler() {
this.empInfo = this.empData;
}
}
}
</script>
<template>
<div>
<el-form :label-position="labelPosition" :model="empInfo" status-icon :rules="rules" ref="empInfo">
<el-form-item label="Employee Name" prop="name">
<el-input v-model="empInfo.markupName"></el-input>
</el-form-item>
<el-form-item label="EMployee Id" prop="id">
<el-input v-model="empInfo.id"></el-input>
</el-form-item>
<el-form-item label="Employee Age" prop="age">
<el-input v-model="empInfo.age"></el-input>
</el-form-item>
<el-button #click="getUserData">Submit</el-button>
</div>
</template>
If you use Parent and Child component, it is good practise to emit data as output to parent component and then process data. This parent child pattern is good for making dynamic form. Reset method cleares your form.
getUserData() {
if (this.$refs.empInfo.validate()) {
this.$emit('get-user-data', this.empInfo);
this.$refs.empInfo.reset();
}
}
The Element UI form seems to latch onto the data it gets initialized with, and resetFields() reinitializes the form with that data. You could defer the watcher until the next tick so that the component's initially empty empInfo could be propagated to the Element UI form as initial data, which would then be used in resetFields().
watch: {
empData: {
immediate: true,
handler(value) {
this.$nextTick(() => {
if (value) {
this.empInfo = value;
}
});
}
}
}
demo