Not sure how to do this, I remember reading something like the syntax below to make the appended "disabled" string conditional in the class. "form-control" should not be ommitted.
<input type="text" :class="{'form-control ':true}, {'disabled' : edit===true}">
You can just mix two of those (static and dynamic classes), according to VueJS docs:
In addition, the v-bind:class directive can also co-exist with the
plain class attribute.
<input type="text" class="form-control" :class="{disabled: edit}">
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 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 an app that has components nested inside. The app is called on the filter id. I have a data element named minTotalSpent. Currently, this contains "3" in the app. The first placement on the page displays appropriately. When I try to pass it in as a variable into vue-slider, however, it does not like it and throws an "invalid expression"warning on the counsel and does not respect the minimum.
<div id="filter">
<form id="search">
Search <input name="query" v-model="searchQuery">
</form>
{{minTotalSpent}}
<div class="filter-container-slider">
<vue-slider
:min="{{minTotalSpent}}"
:max="42"
:value="2"
>
Just elaborating as per #thanksd's answer.
When using any component, over here vue-slider component, if you use v-min = "..." or :min = "...", the value of v-min or :min is in a javascript expression and you cannot use mustaches inside javascript expression.
And when it comes to html attributes like id on any element, you should be using v-bind.
<div v-bind:id="dynamicId"></div>
Read more about them here: https://v2.vuejs.org/v2/guide/syntax.html#Attributes
I have created an HTML-only custom element to represent an input and all the DOM structure that does with it.
I have set up bindable properties on the template to supply values into the element. However, I don't see a way to specify that a bindable should be two-way.
the element:
<template bindable="label,name,placeholder,value">
<div class="form-group">
<label class="control-label col-sm-2" for.bind="name">${label}</label>
<div class="col-sm-7 col-md-6">
<input class="form-control" id.bind="name" placeholder.bind="placeholder" value.bind="value" />
</div>
</div>
</template>
I know I can specify two-way binding each time the element is used (e.g. <my-element value.bind="firstName & twoWay"></my-element>, but I want to set the default without having to create and maintain a separate class (i.e. I like html-only element for this case).
Is this possible?
I don't think that's possible in a simple way. I mean, you could figure out how to override the default behaviour somehow ([source], [source]), but it's likely that you would end up with several more classes to maintain.
Documentation is clear about that:
You can even have bindable properties on your HTML Only Custom Element. These properties default to one-way databinding, but you can't change the default, though you are still free to explicitly set the binding direction when you bind to the Custom Element.
In my opinion, using .two-way explicit binding is your simplest option here.
<my-element value.two-way="firstName"></my-element>
I'm new to dojo and could really use some help with the following 2 field validation examples.
In the following example of a dijit.form.ValidationTextBox field specifying the validator property seems to override the use of the regExp. (ie the field no longer adheres to the regExp rule). How to I make it do both?
<input dojoType="dijit.form.ValidationTextBox"
type="password"
name="password2"
id="password2"
maxLength="50"
trim="true"
regExp="[\w]+"
required="true"
validator="return this.value == dijit.byId('password').value"
invalidMessage="Confirmation password must match password"
/>
I have another similar example where one field depends on the value of another, but I don't have the syntax correct.
<input dojoType="dijit.form.ValidationTextBox"
type="text"
name="homePhone"
id="homePhone"
style="width:20%"
maxLength="10"
trim="true"
required="false"
regExp="[\d]{10}"
validator="return (dijit.byId('preferredContactMethod').value == "home") && (this.value != null)"
invalidMessage="Home phone required (ie. 9198887777)"
/>
Correct; the default implementation of dijit.form.ValidationTextBox.prototype.validator() is to match this.value against this.regExp, as well as check against the various other constraints like this.required. Take a look at the source to see how it's done. If you override that, you're on your own to provide an implementation. Your implementation might choose to delegate to the prototype method and logically 'and' the results with your own tests. You could also override isValid, I suppose.