I am applying translation in vue 2.x and I am using "vue-gettext" but I am having a problem in some cases eg:
<settings-group label="is a label" >
<settings-field label="is a label">
In those cases I can't find a way to translate the label, I was looking for info and there is nothing, but maybe someone here could solve it...
Things I tried:
<settings-field v-translate label="is a label">
Doesn't work
<settings-field label="{{<translate>is a label</translate>}}">
Throw an error: Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of , use <div :id="val".
thank you.
First option (preferred, since in vue3-gettext translate tag would be eventually removed):
<settings-group :label="$gettext('is a label')" />
Second option -- create slot label in settings-group component. Could be useful if you going to interpolate string based on some data from settings-group
# settings-group.vue
<div class="settings-group">
<span class="label">
<slot name="label" v-bind="{ count }" />
</span>
...
# pages/settings.vue
<settings-group>
<template v-slot:label="{ count }">
<translate
:translate-n="count"
:translate-plural="%{count} elements"
:translate-params="{ count }"
>
%{count} element
</translate>
</template>
</settings-group>
Related
I have tried / guessed at every combination of v-bind/v-model/:checked/:value I can think of, but I can't get these damn checkboxes checked on load:
Using Vue Material / Vue3:
<div v-if="items.length">
<div
v-for="(value,key,index) in this.items"
:key="index"
:ref="'icon'+items[key].id">
<md-checkbox
:id="'TDS'+key"
v-model="items[key].complete"
true-value="1"
#change="doDo(items[key].id)"
class="md-primary m-0"
>
{{ items[key].item }} {{items[key].complete}}
</md-checkbox>
</div>
</div>
The bit I can't figure out is how to make the checkbox checked if items[key].complete=1 when data is loaded.
You are already inside the loop
v-model="value.complete"
Same goes for all other bindings.
And your data should not be accessed with this in your template
v-for="(value,key,index) in items"
This one should already work, if you receive your data properly, it may update itself due to reactivity. Maybe try v-model="!!items[key].complete" just to be sure that your value is coerced to a Boolean.
I'm using a UIKit library for a tab component that listens to a uk-tab property that targets an id. The problem with this, is that it creates the same ID for every tabbed component. I like the UI, but whoever thought of this, didn't think too far into it. I could fix it by making the id dynamic but I am having trouble calling it in the uk-tab property because it is rendering a string. Coming from a react background, I would do a string literal and some JSX, something like #item-${_id}to show #item-12, #item-13....and so on. But That's not working. How can I do this in Vue?
Here is an example of how it works
<div class="mytrigger">
<ul uk-tab="connect: #component-tab-left; animation: uk-animation-fade">
</div>
<div class="mytargetedtab">
<ul id="component-tab-left" class="uk-switcher">
</div>
Here is an example of how what I need
<div class="mytrigger">
<ul uk-tab="connect: #_uid+'switcher'; animation: uk-animation-fade">
</div>
<div class="mytargetedtab">
<ul :id="_uid+'switcher'" class="uk-switcher">
</div>
Check out the dev tools. It should be 810switcher, but instead is taking it as a string
Any ideas? Thanks
I believe what you need is:
<ul :uk-tab="`connect: #${_uid}switcher; animation: uk-animation-fade`">
Or if you prefer not to use backticks:
<ul :uk-tab="'connect: #' + _uid + 'switcher; animation: uk-animation-fade'">
The output will be:
<ul uk-tab="connect: #22switcher; animation: uk-animation-fade">
A few notes:
Using a : is short for v-bind: but don't let the name confuse you. v-bind doesn't necessarily bind anything, it just makes the attribute value a JavaScript expression.
I'd avoid using numbers at the start of element ids, I've seen that cause problems in the past. It'd be better to put the numbers at the end.
The underscore at the start of _uid indicates that it's private to Vue. There are no guarantees about what form it will take or whether it will even exist going forward.
Use data-uk-tab instead of uk-tab like below.
<div class="mytrigger">
<ul data-uk-tab="{connect: `#${_uid}switcher`, animation: 'uk-animation-fade'}">
</div>
<div class="mytargetedtab">
<ul :id="_uid+'switcher'" class="uk-switcher">
</div>
For more information => Switcher with tabs
You can use any javascript expression in a data binding in vue. So, if you bind a string template to the attribute, it'll populate what you expect.
<ul :uk-tab="`connect: #${uid}switcher`'; animation: uk-animation-fade">
So I want to adapt the Autofill naming for Birthdays. However, this leads to several problems. Now I need to find out if I can force vee-validate to change the name of the field.
To understand it better. This is how it currently looks like:
<select
v-model="day"
id="day"
name="day"
:class="{'invalid' : errors.has('day')}"
v-validate="'required|excluded:0'"
>
<option
:disabled="true"
value="0"
v-text="trans('food.Day')"
/>
<option
v-for="n in 31"
:key="n"
:value="n"
v-text="n"
/>
</select>
<span
class="bar"
:class="{'invalid' : errors.has('day')}"
/>
The name for the select field is "day".
However, according to this, it should be named: "bday-day".
Since I'm using vee-validate, this leads to a rename of the field name to "bday-day". Now errors.has('day')} won't work anymore.
But even if I change this to errors.has('bday-day'), I cannot use my internal watcher for changes in values. I get the error:
Failed watching path: "bday-day" Watcher only accepts simple dot-delimited paths. For full control, use a function instead.
This is because I have to force the same name of the v-model name and vee-validate name. v-model="bday-day" cannot work.
To make it short. My end goal is something like this:
<select
v-model="day"
id="day"
name="bday-day"
:class="{'invalid' : errors.has('day')}"
v-validate="{required: true, excluded: 0, name: 'day'}"
>
<option
:disabled="true"
value="0"
v-text="trans('food.Day')"
/>
<option
v-for="n in 31"
:key="n"
:value="n"
v-text="n"
/>
</select>
<span
class="bar"
:class="{'invalid' : errors.has('day')}"
/>
I would use the name="bday-day" for autofill, but I would set the field name for vee validate to name: 'day'.
Use the data-vv-name attribute
Vee-validate has you covered and you can setup the attribute data-vv-name to achieve precisely this:
<select
v-model="day"
id="day"
name="bday-day"
:class="{'invalid' : errors.has('day')}"
v-validate="'required|excluded:0'"
data-vv-name="day"
>
Now the errors and fields members provided by vee-validate will have a day entry, instead of using the input name bday-day. Thus, if you have a watcher on errors.day, you won't have that nasty problem with the bday-day watching path.
With VeeValidate v3, you have two relevant options you can pass to ValidationProvider, name and vid.
VeeValidate's docs specify that:
name specifies a field name to be used in error messages.
vid is an identifier used for target/cross-field based rules.
From my tests though, vid is also used as the key for fields and errors in the ValidationObserver if provided, and if not, it falls back to name.
As a result, if you have multiple of the same fields in one form, and you're looking to have a unique key name (so that they don't clash and break), then use name purely just for the field name in error messages, and vid to provide a unique ID to be used by ValidationObserver in the fields and errors objects. For example:
<ValidationProvider
name="hours" // used for error messages
:vid="hours-${unique-part}" // unique key to stop clashes
rules="required"
v-slot="{ errors }"
>...</ValidationProvider>
If you're using VeeValidate v3, you can set "name" attribute for the ValidationProvider
<ValidationProvider name="day" rules="required|excluded:0" v-slot="{ errors }">
I am looping a data, from the data, I am adding the name value into the input field, but not at all set. what is the issue here?
My form template:
<form novalidate name="myForm">
<div ng-show="myForm[addVas.name].$error.pattern">Error will come </div>
<div class="form-group">
<input type="text" [(ngModel)]="addVas.input" [attr.disabled]="addVas.disabled ? '' : null " name="{{addVas.name}}" ng-pattern="/^[0-9]/" (blur)="addAdnlVasAfterInput(addVas)" placeholder="Provide value of shipment"
class="form-control">{{addVas.name}} <!--getting value here-->
</div>
</form>
I am not getting throw the error, when user input instead of number in to charters. how to solve that?
Now I have update my name field in to [name]="addVas.name" but I not confirm the name sent, unless if i get error message
There are some confusions between Angular versions. ng-show should be *ngIf or [hidden] with reverse logic, ng-pattern is [pattern]. [attr-disabled] can be [disabled], etc.. Pattern /^[0-9]/ doesn't allow more than 1 digit, I am not sure it was your aim. If you use a property as pattern expression, the use [pattern]="property":
Here is what I suggest:
<form #myForm>
<input type="text" [(ngModel)]="addVas.input"
[disabled]="addVas.disabled" [pattern]="addVas.pattern"
[name]="addVas.name" #input="ngModel">
<div *ngIf="input.errors && (input.dirty || input.touched)" >
<div [hidden]="!input.errors.pattern">
Should be a number
</div>
</div>
</form>
Demo
The properties cannot perform interpolation.
You need to use property binding for setting values to properties.
Try this:
[name]="addVas.name"
instead of
name= "{{addVas.name}}"
Looking for a generic way to find text before an input field to know what to fill in the field. Using xpath, css selector or any other way possible.
<div>
<span>Full Name</span>
<input name="xddadN">
</div>
<div>
<span>Email</span>
<input name="xedadN">
</div>
Or
<div>
<div><label>Full Name</label></div>
<div><input name="xddadN"></div>
<div><label>Email</label></div>
<div><input name="xedadN"></
</div>
Or
<div>
<label>Full Name<br>
<span><input name="xddadN"></span>
</label>
</div>
<div>
<label>Full Name<br>
<span><input name="xddadN"></span>
</label>
</div>
You can try below XPath expression to get preceding text node:
//input/preceding::*[1]
or more specific for Full Name
//input[#name="xddadN"]/preceding::*[1]
and Email:
//input[#name="xedadN"]/preceding::*[1]
For full name use this Xpath : //input[#name='xddadN']/preceding-sibling::span
code :
String fullName = driver.findElement(By.Xpath(//input[#name='xddadN']/preceding-sibling::span)).getText();
String Email = driver.findElement(By.Xpath(//input[#name='xedadN']/preceding-sibling::span)).getText();
You haven't mentioned any Selenium Language Binding Art so I will be using Java for the example.
First the Answer
Yes, you can use a generic way to find text before an input field as follows :
As per the HTML :
<div>
<span>Full Name</span>
<input name="xddadN">
</div>
<div>
<span>Email</span>
<input name="xedadN">
</div>
To retrieve the text Full Name from the <span> tag with respect to the <input> tag you can use :
String myText = driver.findElement(By.xpath("//input[#name='xddadN']//preceding::*[1]")).getAttribute("innerHTML");
Now the Pitfall
Without any visibility to your usecase in my opinion the generic way would be a pitfall which will induce much chaos and uncertanity for the following reasons :
As per the xpath we are straightway jumping into the previous element, a small change in the HTML DOM (e.g. inclusion of a <span> tag) will make your Testcases to Fail.
In general, while constructing a Locator Strategy through css-selectors or xpath it will be benificial to include the <tagName> to optimize the element search process. If <tagName> are not included your Tests will require more time to locate the elements and perform action on them. In this process you are compromising some of the advantages of Test Automation.
Conclusion
Hence as a conclusion as per the Best Practices always include the <tagName> while constructing a Locator Strategy through css-selectors or xpath.