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'">
Related
This is a dropdown and by default value is "False".
The dropdown value changes in hidden input tag only after selecting true.
<div class="dx-dropdowneditor-input-wrapper dx-selectbox-container" xpath="1">
<input type="hidden" value="False">.
How do I assert this element should contain "False" by default
cy.get('.dx-dropdowneditor-input-wrapper.dx-selectbox-container')
.should('have.value','False')
But it is not accessing this value.
Expecting to be able to assert that by default the value is "False".
You would need to add the input element tag into the selector
cy.get('.dx-dropdowneditor-input-wrapper.dx-selectbox-container input')
.should('have.value','False')
or "find" the input like this
cy.get('.dx-dropdowneditor-input-wrapper.dx-selectbox-container')
.find('input[type="hidden"]')
.should('have.value','False')
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 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 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)"
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("");