Reputation: 53
I am using Vue Material - Select component in my vue js project. I want to set the selected value of the component dynamically. I have gone through the documentation https://www.creative-tim.com/vuematerial/components/select and couldn't find the solution I am looking for. Is there any way to carry on this task.
Thank you in advance
Upvotes: 0
Views: 252
Reputation: 906
<template>
<md-field class="box">
<label for="movie">Movie</label>
<md-select v-model="movie" name="movie" id="movie">
<md-option v-for="opt in options" :key="opt.value" :value="opt.value">
{{ opt.name }}
</md-option>
</md-select>
</md-field>
</template>
<script>
export default {
name: "BasicSelect",
data: () => ({
movie: "",
options: [
{ value: "fight-club", name: "Fight Club" },
{ value: "godfather", name: "Godfather" },
{ value: "scarface", name: "Scarface" },
],
}),
mounted() {
// Here we set default selected value, you can change it any time
this.movie = this.options[0].value;
},
};
</script>
Upvotes: 1