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.
Related
My company does A/B testing for clients who have sites built with various CRM/Middleware providers. One them uses a product built on the Ember.js framework. I do not have access to the source code for the site itself. I need to change the value of a selector component upon page load which I am planning on doing with a Javascript one-liner.
Unfortunately, I can't just change the value of the DOM element directly using document.getElementByID('selectorElement) as this won't trigger other events on the page. I tried using document.getElementByID('selectorElement).click() which had no effect on the page at all. I think it has to be done by interfacing with Ember directly, but I'm not very familiar with the framework.
As an example, imagine you were to navigate to https://guides.emberjs.com/release/. An answer to this question would be a script that can be run in the console that would change the version selector from the default to one of the other options.
The HTML for the component in question is below.
<select name="_name_" data-test-selector="_name_" data-test-form-field-input="_name_" aria-invalid="false" id="ember53-input" class="_inlineSelectInput_tuesss _selectInputBase_tuesss _inputBase_tuesss _inlineInputBase_tuesss _inlineSelectInput_tuesss _selectInputBase_tuesss _inputBase_tuesss _inlineInputBase_tuesss ember-view">
<option disabled="" hidden="" value="">
Select a type
</option>
<option value="Option1">
Option1
</option>
<option value="Option2">
Option2
</option>
<option value="Option3">
Option3
</option>
</select>
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">
I'm using Rails 5.2.0 with Slim-lang and MaterializeCSS
I'm using javascript to dynamically populate a select dropdown, as shown here.
The code works in the sense that the select element gets populated properly. However, the combo list displayed on screen is not populated! When inspecting the html output in Chrome browser, I found that the "select" is actually comprised of:
<input class="select-dropdown dropdown-trigger" type="text" readonly="true" data-target="select-options-f6b96705-f301-b1b9-c113-84ee91f6897a">
<ul id="select-options-f6b96705-f301-b1b9-c113-84ee91f6897a" class="dropdown-content select-dropdown" tabindex="0" style="">
</ul>
<select id="crit_type" name="crit_type" onchange="loadCritValues(this.value)" tabindex="-1"><option value="Select Criteria">Select Criteria</option>
<option value="age_group">age_group</option>
<option value="gender">gender</option>
<option value="current_country">current_country</option>
<option value="home_country">home_country</option>
<option value="first_language">first_language</option>
</select>
As you can see, the select options are properly populated. But it turns out that the "input" and "ul" elements dictate what gets displayed on screen. And the "ul" is naturally empty.
Is there any way to solve this issue, other than having to also modify the "ul" content?
It turns out that the issue I'm facing with select is linked to MaterializeCSS. The HTML it generates is structured in the format I mentioned as per:
https://materializecss.com/select.html
I can just override that behaviour by assigning 'browser-default' class to the select tag:
select id="crit_type" name="crit_type" onchange="loadCritValues()" class="browser-default" =options_for_select(#crit_types)
This will provide the select tag only without the additional html elements, and allows me to manipulate the select with javascript.
At work we had a handy coworker who made a bookmark that auto-filled our ID in textfields on a webpage using javascript that worked wonders. However my company changed the textfields to a dropdown and it no longer works. I've been digging around for a while and I can't seem to find a solution that works. I have very little experience with javascript though. This is what the code was for the textfields:
javascript:{document.getElementById('ID').value=%12345%22;document.getElementById('vendor').value=%2212345%22;void(0)}
I'm guessing the problematic part is the ".value=%" part? Do I need to put something else for a dropdown list?
It could be due to %12345%22 must be between quotations.
javascript:{document.getElementById('ID').value='%12347%22';}
<select id="ID">
<option value="%12346%22">Masoud</option>
<option value="%12347%22">Yoleaux</option>
<option value="%12348%22">Test1</option>
<option value="%12349%22">Test2</option>
</select>
If it is not your actual problem please provide more information.
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!