I am trying to set the value of datepicker using v-model. The js code looks like below:-
var example1 = new Vue({
el: '#example-1',
data: {
end: "2021-03-03T20:20:00Z",
}
})
And the HTML code is like below:-
<div class="mb-3">
<label for="waterEnd">End (date and time):</label>
<input v-model="end" class="form-control" type="datetime-local" id="waterEnd" name="waterEnd">
</div>
I am not able to set this value but however if I print it:-
{{ end }}
Its value is rendered in the HTML page successfully.
Can anyone suggest what's being wrong here?
The UTC time zone indicator (Z) is not allowed for the datetime-local input likely because the local timezone is assumed.
The seconds (:00) are not allowed when the input has no step attribute configured (default is 1000, as in milliseconds). To enable seconds, set a step less than 1000:
<input type="datetime-local" step="1">
You could either remove both:
var example1 = new Vue({
el: '#example-1',
data: {
// end: "2021-03-03T20:20:00Z",
end: "2021-03-03T20:20", ✅
}
})
demo 1
Or configure step and remove only the Z from the string input:
<input type="datetime-local" step="1" v-model="end">
var example1 = new Vue({
el: '#example-1',
data: {
// end: "2021-03-03T20:20:00Z",
end: "2021-03-03T20:20:00", ✅
}
})
demo 2
Related
I'm using Vue, v-calendar library and moment library.
I want that when a page is rendered, a input tag should get a value from getAPI(), but it doesn't.
I guess it's because start and end in the range data is ''.
so I tried to assign data into the input value directly and it worked.
but I want to know why I should assign data in to input value directly.
Is there a way that doesn't use ref and using v-calendar properties?
Thanks in advance!
This is my template code below,
<form class="form" #submit.prevent>
<Vc-date-picker
v-model="range"
:masks="masks"
is-range
:min-date="today"
>
<template v-slot="{ inputValue, inputEvents, isDragging }">
<div class="rangeInput">
<div class="eachInputWrapper">
<input
id="eachInput"
ref="startInput"
:class="isDragging ? 'text-gray-600' : 'text-gray-900'"
:value="inputValue.start"
v-on="inputEvents.start"
/>
</div>
</div>
</template>
</Vc-date-picker>
</form>
This is my script code
data(){
return{
range: {
start: '',
end: '',
},
}
},
methods:{
dateFormat(data){
return moment(data).format("YYYY-MM-DD");
},
getAPI(){
this.$thisIsAPI(Id,Data).then((data)=>{
this.range.start = this.dateFormat(data.fromDate);
this.range.end = this.dateFormat(data.expireDate);
});
},
},
created(){
this.getAPI();
}
This is what I tried, and the input tag gets the value when the page is renderd.
getAPI(){
this.$thisIsAPI(Id,Data).then((data)=>{
this.range.start = this.dateFormat(data.fromDate);
this.range.end = this.dateFormat(data.expireDate);
});
this.$refs.startInput.value = this.dateFormat(this.botInfo.fromDt);
this.$refs.endInput.value = this.dateFormat(this.botInfo.expireDt);
},
I have a application where I'm updating value of input element on button click.
I'm using Vue JS v-model for data binding.
HTML :
<div id="app">
<div>{{ response }}</div> <br>
<input type="text" v-model="response.ruleName" value="" placeholder="" class="editing">
<button #click="myalert">Click me</button>
</div>
JS :
var response = {
ruleName: "ruleJohn",
}
new Vue({
el: "#app",
data () {
return {
response
}
},
methods: {
myalert: function(e) {
document.querySelector('.editing').value = e.target.innerText;
},
}
})
Here is working fiddle : https://jsfiddle.net/38Lj971g/
Now, When I try to edit input value with keyboard, response values does change.
When I try to click button, Though input value changes but response doesn't.
How to deal with v-model for such on-click data updates ?
Don't edit the input value directly, instead edit the v-model it gets its data from, like so:
<button #click="response.ruleName = 'Click me'">Click me</button>
or, if you wish to use the method:
myalert: function(e) {
this.response.ruleName = e.target.innerText;
}
I get different behavior between using #input and v-model, and #input and :value.
What is v-model doing different with :value that I dont get with only using :value?
I created an example at jsFiddle that show the difference: that the top input field would allow only numbers to be typed into the input, while the bottom will allow everything to be typed in.
What do I need to do to get the same functionality by using only #input and :value?
You can achieve this by adding an ref to the input and updating input value through it. Check here. https://jsfiddle.net/RiddhiParekh/nzfr0xy3/
Template =>
<div id="app">
<div>
<input #input="mask1"
v-model="message1"
type="text"
placeholder="Only numbers are allowed">
<p>Message1 is: {{ message1 }}</p>
<hr/>
<input #input="mask2"
:value="message2"
type="text"
ref="myInput"
placeholder="Try numbers">
<p>Message2 is: {{ message2 }}</p>
</div>
</div>
Script =>
new Vue({
el: "#app",
data: {
message1: "",
message2: ""
},
methods: {
mask1(input){
const validCharsForNumberFields = /[0-9]*(,|\.)?[0-9]*/gm
this.message1 = input.target.value.match(validCharsForNumberFields)[0]
},
mask2(input){
const validCharsForNumberFields = /[0-9]*(,|\.)?[0-9]*/gm
console.log(input)
this.$refs.myInput.value = input.target.value.match(validCharsForNumberFields)[0]
this.message2 = this.$refs.myInput.value
},
}
})
I have the following Vue code:
// HTML
<div id="app">
Value: <pre>{{ value }}</pre>
<input type="text" :value="value" #input="setValue">
</div>
// JS
new Vue({
el: "#app",
data: {
value: '',
},
methods: {
setValue(event){
/* Remove non-numeric values */
this.value = event.target.value.replace(/[^\d]/g, '');
}
}
});
I have it set up on JSFiddle here: http://jsfiddle.net/eywraw8t/353729/.
Why does the input allow me to enter non-numeric values?
If you run the code above, and enter non-numeric gibberish into the input element (e.g. asdasfa), you'll see that the input element will contain your entered text (asdasfa), but the element above the input will be empty!
I would like to restrict users to only being allowed to enter numbers into the input. I would like to do this using only Vue, no 3rd party libraries or type="number".
because the value of this.value doesn't change (always ='') so it will not trigger re-render.
The solution:
you can use this.$forceUpdate() to force re-render.
or use bind key with different value.
new Vue({
el: "#app",
data: {
value: '',
errorDescription: ''
},
methods: {
setValue(event){
/* Remove non-numeric values */
this.value = event.target.value.replace(/[^\d]/g, '')
this.errorDescription = 'Only Number allow'
this.$forceUpdate()
}
}
})
.error {
background-color:red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app">
Value: <pre>{{ value }}</pre><span class="error">{{errorDescription}}</span>
<input type="text" :value="value" #input="setValue">
</div>
The issue is Vue doesn't see a change to your value data property because when you filter out non-numbers, you are essentially assigning the same string value back to it. Since strings are immutable and identical when their contents are the same, this doesn't trigger Vue's reactivity.
An easy solution is to manually set the <input> value to the new, number-only value.
this.value = event.target.value = event.target.value.replace(/\D/g, '')
http://jsfiddle.net/9o2tu3b0/
I'm working on a Vue file and have a select
<select v-if="show">
<option v-on:click="test()" value=""> someData</option>
<option>otherdata</option>
</select>
[...]
var instance = new Vue({
el: "#General",
[...]
methods:{
test: function(){
alert('youre goddam right');
}
[...]
}
[...]
}
So What i'm trying to do is to display my datas someData and otherdata. That works great but what i want it's when the user click on firstData, the action "test" append, and an alert comes up but that doesn't work here. I tried with the v-on:click but nothing happend.
Thanks for the help
Yes so it appears that the click event is not triggered for an <option> element. Here is one of the many fix available: using the input event on the select instead, and filter the value.
var instance = new Vue({
el: "#General",
methods:{
test: function(value) {
if (value === "choice1") {
alert('youre goddam right');
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.3/vue.js"></script>
<div id="General">
<select v-on:input="test($event.target.value)">
<option value="choice1">someData</option>
<option>otherdata</option>
</select>
</div>