vue.jsvue-componentvue-materialmd-select

Is there any way to set selected option in Vue DatePicker?


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


Solution

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