I have a input field
<input #focus="showTimeAvailabilityModal(this)" class="form-control" v-model="date1" placeholder="First Date & Time Preference"/>
I called a function showTimeAvailabilityModal on focus of that input field.
I need to get value of input field in this function. How can I do this in simplest way?
You can do this.
showTimeAvailabilityModal(){
var date =this.date1;
}
or try this
#focus="showTimeAvailabilityModal(date1)"
Related
As we know v-model is two way binding. Which means it's combination of V-bind and maybe another attribute which I'm looking for and it updates the data. I have a input which it's value is sometimes custom and sometimes should be read from config based on another parameters.
What I need is an input with a v-bind:value/:value and another for update. I know I can do it with #change and a custom method But I'm looking for something easy, Bottom line is I want V-model without doing v-bind ! Thank You
EDIT: I did it with two input using v-if .
<input type="number" class="item-input" v-if="setting.keto_program=='custom'" id="protein_per_kilo" v-model="setting.keto_program_protein_density">
<input type="number" class="item-input" v-else disabled id="protein_per_kilo" :value="config.keto_programs[setting.keto_program].protein_density">
Anyway doing this using just one input feels better. Thanks
May be you can use computed hook.
computed:{
yourVariable(){
return someVariable/computation
}
}
you can use yourVariable inside your code that will act like v-model without doing v-bind.
yourVariable will be updated as soon as the variables of the return statement of this be changed or updated
Edited:
part of v-model for input tag
<input
v-bind:value="variable"
v-on:input="variable = $event.target.value"
>
or
<input
:value="variable"
#input="variable = $event.target.value"
>
found this via
Vue.js—Difference between v-model and v-bind
I am using an el-datepicker component to filter a list of items on an el-table according to their dates. When I select a new date range, the filter works correctly but the datepicker element does not update to the new dates I selected until I click it again. Has anyone faced this problem before?
<el-date-picker
size="mini"
:value="filters.start_date"
#input="updateFilters({ value: $item, prop: 'start_date' })"
value-format="yyyy-MM-dd"
format="MMMM dd, yyyy"
type="daterange"
align="right"
/>
Then in the methods of my component:
updateFilters(data) {
this.$store.commit('panel/changeFilters', data)
...
}
So the datepicker gets its value from filters.start_date. The thing is, if I do console.log(this.filters.start_date), it shows the correct date range (the one I just selected). However the datepicker does not show that date range until I click again.
The problem is that you are binding the value i.e. using :value instead of v-model. So if you binding the value you have to assign the value to the data by yourself such that it causes reactiveness and hence updates the DOM.
If I with your approach of going with the binding value I would like to change my code something like this:
<el-date-picker
size="mini"
:value="filters.date_range"
#input="updateFilters"
value-format="yyyy-MM-dd"
format="MMMM dd, yyyy"
type="daterange"
align="right"
/>
Notice I have changed the filters.start_date to filters_date_range, as the value for type=daterange takes an array with two items. something like
[startDate, endDate]
Another thing that you should notice is I removed the parameters from updateFilters, because I want to receive the latest daterange whenever it gets selected.
Now in my handler function I just need to do:
updateFilters(data) {
this.$store.commit('panel/changeFilters', data)
this.filters.date_range = data
//data : [startDate, endDate]
}
And, it will update the DOM as soon as u change the picker value.
Another easier approach would be to use v-model instead of :value.
<el-date-picker
size="mini"
v-model="filters.date_range"
#input="updateFilters"
value-format="yyyy-MM-dd"
format="MMMM dd, yyyy"
type="daterange"
align="right"
/>
And it will update the DOM automatically, you don't have to set the value explicitly in the input handler, and can do any other stuff in the handler if you want to.
I have an input, how can I change it's type based on a condition?
<input :type="showInput ? text : hidden">
I've tried the above and type does not render.
Any ideas?
Are text and hidden variables? If not, you need to set the value of type to a string:
<input :type="showInput ? 'text' : 'hidden'">
I am making a form in a Vue component and would like to set the HTML attribute required to an input field based on the value I am having in an object property.
So, for the example, an object that has fields like this:
label:"Name"
required:"1"
type:"textbox"
I need to a set the field to have required attribute in an input tag:
<input class="input is-large" :type="input.type" required>
And for the ones that don't have 1 as a value for that field I don't want a required attribute.
How can I do that in Vue?
You can do it like this:
<input class="input is-large" :type="input.type" :required="obj.required == 1">
Since your object's required property has 1 as a string not number I used == for comparison so that equality is tested after coercion
I have input with autocomplete.
<input type="text" class="form-control input-sm isFieldValueEmpty tooltip"
style="width:779px;" id="searchK" name="keywords" value=''>
Everything works good, but I set value of autocomplete and after that add value from autocomplete to hidden input (user can choose many value from autocomplete). But when I add this value and try to set empty value of autocomplete input:
$("#searchK").attr("value","");
In input field still have text, but value od this input is empty (checking by firebug).
Any idea how delete this text?
I found solution
$(this).val('');
return false;
And input is clear.
Don't use attr() to change the value, use val()
$("#searchK").val("");