I'm using vue-i18n to handle translations in my software. I'm trying to create a select input to change between languages. To do so, I'm using the following code:
<select class="form-control" v-model="$i18n.locale">
<option v-for="(key,value) in languages" v-bind:key="value" :value="value">
{{key}}
</option>
</select>
I want that my actual language ($i18n.locale) appears as selected in my select input. However, none of the languages is selected, as the following image shows. How can I solve this?
First argument in v-for is the value and second is the key.
Documentation.
So this should work:
<option v-for="(value, key) in languages" :key="key" :value="value">
You have an example in i18n's docs.
Or, since you want to use the values as keys (as they're unique & primitives):
<option v-for="lang in languages" :key="lang" :value="lang">
Related
I'm getting the following:
Vue template code:
<select class="form-select" v-model="post_format.wpml_language">
<option v-for="(lang, index) in wpml_languages" :value="lang">{{lang}} {{index}}</option>
</select>
What I want; I want the value attribute of the option element to be the language code (en/es) and the text displayed to be the Language name
I'm not sure how to access the object in the vue code for it to display in the way I want. I've tried:
<select class="form-select" v-model="post_format.wpml_language">
<option v-for="(lang, index) in wpml_languages" :value="lang[index]">{{lang[index]}}</option>
</select>
Any help is appreciated
I recommend you to modify your object so that your code and language are separate values.
this.languages.filter(lang =>{
var code = Object.keys(lang)[0];
lang.code = code;
lang.value = lang[code];
});
This will make your code more readable. Codesandbox link for your reference.
You probably don't want lang[index], because you have nested objects.
In this instance, the actual loop index is not useful. For each member of 'lang', you most likely want the key to be your option value ("en") and the value to be the printed text ("English"). While the following is not the cleanest option, it will work:
<select class="form-select" v-model="post_format.wpml_language">
<option v-for="(lang, index) in wpml_languages" :value="Object.keys(lang)[0]">
{{ lang[0] }}
</option>
</select>
I am having an issue with Semantic-UI searchable dropdown and Vuejs data binding, at the moment it is only able to model bind 1 changed option regardless of the selected dropdown option. below is my code.
I tried using the #change event but this has brought no results for me.
<select
name="clients"
id="clients"
class="ui fluid search selection dropdown uppercase"
v-model="selected_client"
>
<option value>Select Client</option>
<option
v-for="(client, index) in clients"
:key="index"
:value="client.services"
>{{client.firstname}}, {{client.lastname}}</option>
</select>
I realized my error, it was not on the #change event handler rather how I was handling the v-bind key as v-bind expect each key to be unique so in my case, I wasn't providing such so I passed the event to a method which filters out the specific client based on the id given as the value. below is the solution which worked for me.
I hope someone will find this useful.
<select
name="clients"
id="clients"
class="ui fluid search selection dropdown uppercase"
#change="clientData($event)"
>
<option value>Select Client</option>
<option
v-for="client in clients"
:key="client.id"
:value="client.id"
>{{client.firstname}}, {{client.lastname}}</option>
</select>
I’m currently working with vue-i18n for internationalization and got a problem with lists in this topic. The language can be changed using a dropdown menue on a permanent navigation bar.
There is a Component A with a child Component B. Within this child component there are two lists, filled via:
<select id="element1" class="ui dropdown" v-model="application.datatable">
<option value="">... ... ...</option>
<option v-for="i in tableRows" :value="i.id">
<p>
{{$t(i.element.name)}}
</p>
</option>
</select>
Here I’m experiencing the problem, that the {{$t(i.element.name)}} is translated correctly, but won’t change after the first initialisation. So if I change the language from english to german, all other labels and strings are changed, but the lists are still in english (Wochentag: |Monday|Tuesday|…)
For this, I would need a possibility to either rerender the lists (maybe via id, but found nothing in jQuery) or a way to get the lists rerendered every time the language changes.
Anyone having an idea about this?
Huge thanks!
AdV
Bind your select to ($i18n.locale) in html
<select name="lang" v-model="$i18n.locale">
<option v-for="lang in langs" :value="lang">
#{{ $t('general.' + lang) }}
</option>
</select>
Note: # symbole before curly brackets is because this code is in my .blade.php file. If you are in the .vue file, it is note needed.
I've got a weird thing going on using a Select element with Vue JS:
The following code:
<select id="nameDd" v-model="name" >
<option v-for="n in names" v-bind:value="n.key" " >
{{ n.value }}
</option>
</select>
renders the Select without the Value attribute in the Options elements:
<select id="nameDd">
<option>Carol</option>
<option>Carl</option>
<option>Clara</option>
</select>
This of course means that the correct Option cannot be selected when required. In my scenario an entry in a table is clicked and the edit form is shown (using v-show) but the Select remains empty instead of selecting the right value. In the background, the v-model 'name' does have the right value.
Confusingly, as soon as I select one Option, it adds the Value attribute:
<select id="nameDd">
<option value="1">Carol</option>
<option value="2">Carl</option>
<option value="3">Clara</option>
</select>
Now the (even more) confusing part. This actually shows the Value attribute in the Option elements:
<select id="nameDd" v-model="name" >
<option v-for="n in names" v-bind:value="n.key+'X'" " >
{{ n.value }}
</option>
</select>
...but of course with an appended X, which again avoids the right Option being selected.
- Is this some VueJs feature that I don't get? What am I doing wrong?
Why is there a second double-quote (") after v-bind:value in the option tag?
<option v-for="n in names" v-bind:value="n.key" " >
I can't find any other issue with your code. I practically wrote the same code again and it worked. Here is a working jsFiddle for reference: https://jsfiddle.net/mani04/3x0z3vzk/
As you can see, I really don't have much code, just the 3 lines:
<select v-model="selectedPerson">
<option v-for="person in people" :value="person.key">{{person.name}}</option>
</select>
I don't know if the second double quote was causing the issue. Vue expects perfect markup so that it can do its model-view bindings properly. When I tried to put a stray double-quote like yours, I got a console error, not the missing option value that you noticed.
I hope this example helps to fix your code!
I am currently trying to make a drop down menu that runs off of a model but also has two "default" options that are at the top. Currently I have the following:
<select class="category-selector" chosen
inherit-select-classes="true"
ng-if="auction.category_options.length > 1"
ng-model="auction.active_category"
ng-options="g.label group by g.main_category for g in auction.category_options"
ng-change="auction.active_category == null ? auction.clear_keyword_matching() : auction.refresh_matching_items()">
<option value="" selected>Active items ({{auction.category_counts['Active'].total}})</option>
<option value="all">All items ({{auction.category_counts['All'].total}})</option>
</select>
I am having trouble getting the "All items" option so show up in the dropdown. Is it not possible to declare two options and populate the rest using the ng-options / model?
Image of dropdown
Adding extra option tags only works if you set value="" for the additional options
<option value="" selected>...</option>
As soon as the value isn't empty, it will not show, as explain here. So you will probably need build this using ng-repeat.
In this answer, there is a solution using a directive, maybe that could work.