<select class="form-control" name="template" v-model="selected">
<option v-for="item in inventory" v-bind:value="item">
{{ item.name }}
</option>
</select>methods:{
onChange: function(e){
var id = e.target.value;
var name = e.target.options[e.target.options.selectedIndex].text;
console.log('id ',id );
console.log('name ',name );
},
<select name="customerName" id="" v-on:change="onChangeSite($event)">
<option value="1">Jan</option>
<option value="2">Doe</option>
<option value="3">Khan</option>
</select><select>
<option v-for="(item , index) in categories" v-bind:key="index" :selected= "item.id == 30" >
{{item.title}}
</option>
</select><select v-model="selected">
<option v-for="option in options" v-bind:value="option.value">
{{ option.text }}
</option>
</select>
<span>Selected: {{ selected }}</span><select v-model="selected">
<!-- inline object literal -->
<option v-bind:value="{ number: 123 }">123</option>
</select><template>
<select
:class="$options.name"
v-model="selected"
@change="updateValue"
>
<option
disabled
value=""
v-text="disabledOption"
/>
<option
v-for="option in options"
:key="option"
:value="option"
v-text="option"
/>
</select>
</template>
<script>
export default {
name: 'FormSelect',
model: {
// By default, `v-model` reacts to the `input`
// event for updating the value, we change this
// to `change` for similar behavior as the
// native `<select>` element.
event: 'change',
},
props: {
// The disabled option is necessary because
// otherwise it isn't possible to select the
// first item on iOS devices. This prop can
// be used to configure the text for the
// disabled option.
disabledOption: {
type: String,
default: 'Select something',
},
options: {
type: Array,
default: () => [],
},
value: {
type: [String, Number],
default: null,
},
},
data() {
return {
selected: this.value,
};
},
methods: {
updateValue() {
// Emitting a `change` event with the new
// value of the `<select>` field, updates
// all values bound with `v-model`.
this.$emit('change', this.selected);
},
},
};
</script>