We Keep Coding

How to select an option on Vue

<template>
<select class="form-control mt-1" #change="selectUser">
<option >select user</option>
<option v-for="(user, index) in users" :key="index" {{user.first_name}}</option>
</select>
</template>
<script>
selectUser(event){
if(event.target.selectedIndex != 0){
this.index = event.target.selectedIndex-1
this.selectedUsers.push(this.users[this.index])
this.users.splice(this.index, 1)
}
}
</script>
The idea of this script is that when you select an option it gets removed and added to another array of objects and it disappears from the select list.
I want when this happened, the first option to get selected back again.

You can use v-model to get the selected item from <select>
<select v-model="selected">
......
</select>
and then use it this way:
<span>Selected: {{ selected }}</span>

The best way is to have :
a options and a selectedOption in the data.
A availableOptions as computed options, with options.filter(o => o !== this.selectedOption)
Bind the select with a v-model=selectedOption
bind the with the avaiableOptions

Default option in <select> not showing

I am experiencing a stupid issue with a <select>. My toolchain of choice is Vue.js with Bootstrap and I am trying to create a dynamic <select> that is populated with Vue. My issue however is that the default option in the <select> is not showing, instead the form-element is blank.
This is my coding, the input group is almost identical to the example provided in the Bootstrap documentation. I also tried the suggestions mentioned in this question however they did not work.
<div class="input-group mb-3">
<div class="input-group-prepend">
<label
class="input-group-text"
for="action_manufacturer_input">Manufacturer</label>
</div>
<select
v-model="form.manufacturer"
class="custom-select"
id="manufacturer_input">
<option disabled selected value="undefined">Please select one...</option>
<option
v-for="manufacturer in manufacturers"
v-bind:value="manufacturer.id">
{{ manufacturer.display_name }} : {{ manufacturer.full_name }}
</option>
<option v-on:click="toggle_input()">Add new manufacturer...</option>
</select>
</div>
As a sanity check I removed the Bootstrap styling however that did not change anything. My question: how do I get the default selected option to show?
P.S. For what it's worth my back-end is Laravel, however I don't see how it could cause an issue.

The v-model of your select is binded with form.manufacturer state
What is the value of form.manufacturer ?
You need to cheek that, because, Vue is searching an option that match to the value of form.manufacturer.
I have created this codepen as example
<div id="app">
<!--Bind select value with form.category-->
<select name="options" v-model="form.category">
<!--Add an empty (no value) option-->
<option :value="null">Choose a Category</option>
<!--Add options when value is id-->
<option v-for="category in categories"
:key="category.id"
:value="category.id"
>
{{category.name}}
</option>
</select>
<br><br>
<!--See how the state change when option select change-->
<div>Value of Category: {{form.category}}</div>
</div>
var app = new Vue({
el: '#app',
data: {
form:{
category: null
},
categories: [
{id: 1, name:"Category 1"},
{id: 2, name:"Category 2"},
{id:3, name:"Category 3"}
]
}
})

Thanks to #Martin who in the comments section prompted me to look elsewhere and I found it. (#Cristian Incarnato answered the question as I answered it). I have a habit from C++ of initializing all my data variables with null values. So my data variables were being set as:
data() {
return {
form: {
manufacturer: null,
}
};
},
By changing the above to the following:
data() {
return {
form: {
manufacturer: "Please select one...",
}
};
},
This fixed the issue. Thanks to all for the help!

I had a similar issue where my disabled option was not showing in a Select and the only thing that was missing was the binding of the value property on the disabled (desired default) option.
Not working:
<option disabled value="null">Select one</option>
vs. Short hand Working:
<option disabled :value="null">Select one</option>
Long form working:
<option disabled v-bind:value="null">Select one</option>
Notice the value attribute is not bound to anything in the first example, thus Vue is unable to assign it.

Sum dropdown values on AngularJS 4

I'm trying to make a page where the user will choose a few drop-downs, each option of each dropdown will have a number value. I want Angular to show the sum of all selected options and store on a variable or something so I can use it on an IF.
Here's the code I used as a workaround:
<select id="" [(ngModel)]="select1">
<option value="1">name1</option>
<option value="2">name2</option>
</select
<select id="" [(ngModel)]="select2">
<option value="1">name1</option>
<option value="2">name2</option>
</select
<b>Points: </b> {{ select1 -- select2 }}
However this does not store in any variable so I cannot use on an IF.
I want to do something like this:
<label *ngIf="summ > 16; else error">Higher than 16 </label>

Call a function with ngIf where it adds all the model variable values
<label *ngIf="calculatesum() > 16"; else error">Higher than 16 </label>
and in TS
calculatesum(){
return select1 + select2 +select3 + select4;
}

Validation for select field angular 2

I am using angular2#2.4.1 release. How would i do a validation on select field?
<div class="form-group" [class.has-error] = "schoolError">
<label class="control-label" for="lang">Select School</label>
<select class="form-control" name="school"
required #school
[(ngModel)] = "model.school">
<option value="default">Select a school</option>
<option *ngFor= "let sch of school">{{sch}}</option>
</select>
</div>
<button class="btn btn-primary"
[disabled] = "form.invalid" type="submit">Submit</button>
Basically i want to disable the button when the select field is invalid? How do i make the select field invalid when no value is selected?

You can make a boolean variable and assign to it false as default value. When user chooses any option, it will turn true.
https://plnkr.co/edit/yR5xz4h3llkxHsUQxFJB?p=preview
<div>
<select [(ngModel)]='selected'>
<option value='one'>Three</option>
<option value='two'>Two</option>
</select>
<button [disabled]='!selected && form.status == 'VALID'>click</button>
</div>
selected:boolean = false;

Try changing the value in your default option to an empty string:
<option [value]="">Select a school</option>

I run into the same kind of situation and the below snippet seems to work pretty good.
<option [ngValue]="undefined">Select a school</option>

When adding ngForm to your name for your form your validation should work. I assume that is missing, because otherwise your form validation would work as is. So the only thing you would need is to add to your formtag is the aforementioned ngForm, like so:
<form #form="ngForm">
Here's a plunker

I believe you should be able to implement a [disabled]="checkSelectFunction()" on your button and then create a function to check if no value is chosen in the select field.

I am a little late here but the one thing that worked for me was setting the properties to null in the component.
For example,
HTML:
<div class="form-group">
<label for="type">Type</label>
<select
class="form-control"
id="type"
name="type"
[(ngModel)]="appointment.typeId"
required>
<option *ngFor="let aType of types"
[value]="aType.appointmentTypeId">
{{aType.type}}
</select>
Component:
appointment : Appointment = new Appointment(null);
Where model is:
export class Appointment {
constructor(
public typeId: number
) {}
}
I hope this helps someone like me who is new to Angular

I tried to give a value to option of the select like
<select id="something" formControlName="something">
<option value="something">Something</option>
</select>
The value of the option should not be an empty - if it's empty this required field counts as invalid.

ng-model in select box is not working correctly

I am using angular js to draw select boxes.
<select ng-model="selected">
<option value="{{obj.id}}" ng-repeat="obj in values">{{obj.name}} </option>
</select>
selected id - {{selected}}
Here the default selected is not initialized according to value selected.
Have made a fiddle for the problem.

You should use ngOptions directive to render selectbox options:
<select ng-model="selected" ng-options="obj.id as obj.name for obj in values"></select>
Fixed demo: http://jsfiddle.net/qWzTb/1984/

case 2 is updated in this plunker
http://jsfiddle.net/26yjn8ru/
<div ng-repeat="arr in itr">
<select ng-model="arr.id"
ng-options="value.id as value.name for value in values">
</select>

Just add ng-selected="selected == obj.id" in the option tag
<option value="{{obj.id}}" ng-repeat="obj in values" ng-selected="selected == obj.id" >
{{obj.name}}
</option>

Correct Way would be like :
<select id="select-type-basic" [(ngModel)]="status">
<option *ngFor="let status_item of status_values">
{{status_item}}
</option>
</select>
Value Should be avoided inside option since that will set the default value of the 'Select field'. Default Selection should be binded with [(ngModel)] and Options should be declared likewise.
status : any = "Completed";
status_values: any = ["In Progress", "Completed", "Closed"];
Declaration in .ts file