While using Tailwind with utility-first approach to css, I often find the need to bind multiple classes to a single variable.
For instance, to style an input form, I need to add border-red, color-red, etc if there is an error.
Is there a nice and elegant way to express this in Vue instead of writing v-bind:class="{ 'border-red': error, 'text-red': error }?
You can combine both classes into the same property:
:class="{ 'border-red text-red': error }"
Another easy solution:
:class="error && 'border-red text-red'"
or for if, else
:class="error ? 'border-red text-red' : 'border-green'"
You also can concatenate strings to classnames:
:class="'border-'+borderColor"
Related
I'm trying to learn more about how Selenium works with VBA and I'm trying to do somethings about the trendings behaviors of ecommerce nowadays.
In this case, I don't know how works the FindelementByclass when it has special characters like _ or - inside, because it always gives me empty result and I need to identify it because I want to go through every class called as it.
<span class="minificha__sku ng-binding">Cód TG: AS0-322</span>
space in class means it has two classes,
class="minificha__sku ng-binding"
means it has "minificha__sku" and "ng-binding" , so use xpath or css instead of byclass or use either of the two class not two
css:
span[class="minificha__sku ng-binding"]
xpath
//span[#class="minificha__sku ng-binding"]
To identify the element you can use either of the following Locator Strategies:
Using FindElementByClassName I:
bot.FindElementByClassName("minificha__sku")
Using FindElementByClassName II:
bot.FindElementByClassName("ng-binding")
Using FindElementByCss:
bot.FindElementByCss("span.minificha__sku.ng-binding")
Using FindElementByXPath:
bot.FindElementByXPath("//span[#class='minificha__sku ng-binding']")
I am trying to set rules to control buttons that are inside of v-text-area on Vue2/Vuetify. How can I do this?
I tried several things, please do not judge me i am beginner of coding concept
In order to use Vuetify validation rules, you need to wrap all elements on which you want to perform validation in a <v-form> element.
On your input components, you need to provide an array to the rules prop with the names of functions you define which perform validation.
The functions which validate take the value as an input and return true if the input is valid and false or a failure string if the input is invalid.
An example of such a function defined in the methods section would be:
isNumber(input) {
return /[0-9]+/g.test(input) || "input must be a number";
}
Passing it to your v-text-area would look like this:
<v-text-area :rules="[isNumber]" />
More info is available in the #rules section of Vueitfy's Form docs.
I am very new to Vue,
i tried to simulate this in bellow link.
https://jsfiddle.net/kyncgL7w/9/
I have this simple html select tag. Where I am showing values from object(banks).
now I have used v-on:change so when ever user will select any values, i want to get values of
> ledger_object_type_sub_id and ledger_object_type_sub_name
Now, I can get the ledger_object_type_sub_id from v-bind or v-model,
but how do i pass the value of ledger_object_type_sub_name into a function.
i.e get_existing_bank_id(bank_name_id, **bank_name**) so that i can use that value can be use later on?
Thanks for your help.
Just bind object value on your option tag
<option v-bind:value="bank">..</option>
What you can do is to find in your banks array the ledger_object_type_sub_id who is equal to your bank_name_id.
get_existing_bank_id: function(bank_name_id) {
console.log(this.banks.find(bank => bank.ledger_object_type_sub_id === bank_name_id).ledger_object_type_sub_name);
}
Here is your fiddle update with the working solution : https://jsfiddle.net/sjh038w9/
I need to do a shortif in a v-model, but eslint gives the folowing problem:
[vue/valid-v-model] 'v-model' directives require the attribute value
which is valid as LHS.eslint-plugin-vue
so the code works. but its not the way it needs to work.
this is the code i have now
<v-text-field
v-show="field.type == 'String'"
v-model="_isMultiple(content_data[tabindex]) && subitem != null ? content_data[tabindex][subitem][field.name]
: content_data[tabindex][field.name]"
:label="field.name"
:counter="field.counter"
max-width="100px"
/>
So this code needs a little explanation to it.
I try to build this as an dynamic module. If I get an array back from my json response it needs to v-model the subitem. If I get an object back from the response it just needs to v-model that object.
The data (content_data[tabindex]) + field do i get from a v-for loop and other loops in my vue html
so I think its not an option to do a computed prop because
I can't get in the right data.
_isMultiple function code:
_isMultiple(content_data) {
return Array.isArray(content_data)
}
any solution for this?
Maybe you should not use v-model, but build it on your own with value binding and event listening.
v-model is only a shorthand: https://v2.vuejs.org/v2/guide/forms.html.
By implementing it on your own you can use a method to set the values and a computed property to get it.
I have a Dojo UI widget that has a widget embedded within it. I need to pass an object to this embedded widget for it to set itself up correctly, but I'm not sure how to do it.
I have been templating in the embedded widget in the template for the wrapper widget, for example:
...<div class="thing"
data-dojo-type="mycompany.widgets.ComplexEmbeddedWidget"
data-dojo-props="stuff: '${stuff}'"></div>...
but this doesn't seem to work, I guess the data is passed as a string maybe?
I'm pulling out this data by setting it to a property in the embedded widget and then referencing it in my postMixInProperties function.
Doubtless this is the wrong approach, what should I be doing to set up an embedded widget such as this?
I think if you are going to use this approach, you want to convert the javascript object json before it is passed to the templated embedded widget.
You can easily do this by requiring 'dojo/json' and doing
this.stuff=jsonModule.stringify(this.stuffAsObject);
As you have already discovered, if you are setting more complex properties, programmatic instantiation is probably the way to go.
If your mycompany.widgets.ComplexEmbeddedWidget is desperate to have the object 'stuff' set allready once it is initialized (in constructor), then im not sure this approach will do, however a simple fix could be removing the ' quotes around ${stuff}?
What happens is basically that you derive the widget with dijit/_TemplatedMixin. This in turn, during buildRendering, calls _stringRepl on 'this' (the widget). I am not completely certain of the flow, since youre working with WidgetsInTemplate..
lets as example, set a widgets attribute to an array via markup:
<div
data-dojo-type="dijit.form.Select"
data-dojo-props="options:[ 'val1', 'val2']">
</div>
As you see, no quotes around the value - or it will render as a string. Lets then change your ComplexEmbedded template to
dojo.declare("exampleName", [_WidgetsInTemplateMixin, _TemplatedMixin], {
templateString: '<div class="outerWidgetDomNode">
...
<div class="thing"
data-dojo-type="mycompany.widgets.ComplexEmbeddedWidget"
data-dojo-props="stuff: ${stuff}"></div>
...
'
});
To instantiate the ComplexEmbeddedWidget.stuff with an object, this needs to be a string. _Templated uses dojo.string.substitute, which probably would fail if given deep nested object.
Markup example:
<div data-dojo-type="exampleName" data-dojo-props="stuff: '{ json:\'Representation\', as:\'String\'}'"></div>
Or via programmatic
var myObj = { obj:'Representation', as:'Object' };
var anExampleName = new exampleName({
stuff: dojo.toJson(myObj) // stringify here
}, 'exampleNode');
Lets know how goes, ive been wanting to look into the presendence of flow with this embedding widgets into template stuff for a while :)
You can programmatically insert widgets. This seems to be be the way to go if the inserted widget requires JavaScript objects to be passed to it.