Vue JS not rendering the value attribute of Option elements - javascript

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!

Related

Set default selected item in select input using Vue.js

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">

Vue-i18n and lists

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.

Startup value does not set selected value

I've made a simple angular.js example which shows my problem: example
I want to set the start value of the select element to a specific value.
<select name="i" id="i" ng-model="selectedItem">
<option ng-repeat="i in items" value="{{i}}">{{i}}</option>
</select>
The options and the select element get rendered perfectly. But, like in the example, when i set the value in my controller to 6, the selected value on the page is still the first element.
scope.selectedItem = 6;
There are 2 simple buttons which just change the selected value. When you press them the selection change without problems.
EDIT: i updated the jsfiddle and removed unused code and renamed code to make things a bit more clear
EDIT2: I missed to ask if it is possible to fix the second select element too? The different is that this array contains objects instead of numbers.
<select name="o" id="o" ng-model="selectedItem">
<option ng-repeat="o in objects" ng-value="{{o.ID}}">{{o.Text}}</option>
</select>
You should not use ngRepeat to render option elements, it's not supposed to work properly with select and options. Use ngOptions which will work as expected with ngModel:
<select name="i" id="i"
ng-model="selectedItem"
ng-options="i for i in items">
</select>
For the second selectbox which has ngModel bound to ID property of the objects in array, it will be:
<select name="o" id="o"
ng-model="selectedItem"
ng-options="obj.ID as obj.Text for obj in objects">
</select>
Demo: http://jsfiddle.net/d3jf7ueq/9/

AngularJS, select onChange or ngChange

I'm new using angularjs and the angular user interface. I'm interested in the tag.
This is my html:
<select id="part1" ui-select2 ng-model="params.id" style="width: 200px;">
<option value="">Provinsi</option>
<option ng-repeat="v in prov" value="{{v.id}}" title="{{v.text}}"
ng-selected="v.id == params.id">{{v.text}}</option>
</select>
<select id="part2" ui-select2 ng-model="params2.id" style="width: 200px;" ng-disabled="true">
<option value="">Kabupaten</option>
<option ng-repeat="y in kab" value="{{y.id}}" title="{{y.text}}"
ng-selected="y.id == params.id">{{y.text}}</option>
</select>
and this my app.js :
$http.get('json/provinsiData.json').success(function(datax) {
$scope.prov = datax;
});
//part2 data
$http.get('json/acehData.json').success(function(datay) {
$scope.kab = datay;
});
$scope.params = {}
$scope.params2 = {}
As you can see select part2 is disabled.
How can I create an event change that works like the condition below?
if selected option of part1 is index 0
then select part2 disabled = false and load json part2 data.
The angular-js select supports the ng-change attribute which may call any javascript method defined in scope.
Example:
However your best bet may be just to evaluate an $scope expression in your ng-disabled= attribute, e.g. ng-disabled="params.id == 'X'".
With Angular, we usually aren't looking for events to trigger changes. Instead, when the model changes, the view should update to reflect those changes.
In this case, the second element should be enabled (not disabled) depending on a value in the model. When the model value connected to the first select menu satisfies some condition, enable the second menu. Yes, technically there's an event, but we don't need to care about it, all that matters are the model's values.
Here's a simplified example of how this might work:
<select ng-model="selection.item">
<option value="">Clothing</option>
<option ng-repeat="item in clothes">{{ item }}</option>
</select>
<select ng-model="selection.size" ng-disabled="!selection.item">
<option value="">Size</option>
<option ng-repeat="size in sizes">{{ size }}</option>
</select>
The second select menu's ng-disabled attribute is a simple expression which basically evaluates to "disable me if selection.item does not have a value". That could just as easily be a more complex expression or a function.
Here's a plunkr based on the code above

Dynamic select option list resetting to first value

I've got a dynamically populated <select> list, where the first option is created by HTML and PHP when the page first loads, but when you drop down, javascript populates a list of additional options. However, when I select an option and remove focus, it is reset to the original selected option. I'm pretty sure that what I'm doing is not getting saved, but I'm not sure how to fix it.
Here's the HTML, which works fine:
<select name="select1" id="select1" onfocus= "checkSelect(this.value)">
<option value ="XXX">XXX</option>
</select>
The checkSelect() function does a bunch of stuff, but then it ends as follows:
//do a bunch of stuff, ending in populating the 'legal' array.
document.input_form.select1.options.length=1;
//which I think is actually redundant
for (i=0; i < legal.length; i++)
{
document.input_form.select1.options[i+1]=new
Option(legal[i], legal[i], false, false);
}
Am I missing something necessary to make the option persist on the page?
The only reason I could think of such a behavior would be select1 wrapped into unclosed tag <label>, for example:
<label>label <!--may be missing </label> here -->
<select name="select1" id="select1" onfocus="checkSelect(this.value)">
<option value ="XXX">XXX</option>
</select> <!--may be missing </label> here -->

Categories

Resources