[Vuejs]-Vue.js preselect first element in select field?

by

0👍

Ok found solution here: http://www.muse-ui.org/#/selectField

Just had to assign selected to 0 and remove the assign in the populateDates method like ths:

  export default Vue.component('st-filter', {
    data () {
      return {
        selectModel: 0, //<=== Assign = 0
        dropdown : [],
      }
    },
    methods: {
      populateDates: function () {
        let date7daysAgo, date1monthAgo...
        this.dropdown = [`Last week (${date7daysAgo} - ${dateToday})`, `Last month (${date7daysAgo} - ${date1monthAgo})` ];
        // ERASE this: ====> this.selectModel = this.dropdown[0];

      }
    },

0👍

I googled the entire internet for a solution and out of a sudden it stuck me…
Now with the Composition API you use either ref() or reactive({}) in combination with the v-model and there you can set the value.
So, in my case I knew the id I wanted to set to be pre-selected:

      <label for="myoptions">{{ $t('options') }}</label>
      <select id="myoptions" v-model="options.category" class="form-select">
        <option v-for="category in categories" :key="category.id" :value="category.id">
          {{ category.name }}
        </option>
      </select>

In my case I wanted to set the option with the id of 2 to be the pre-selected:

    <script setup lang="ts">   
    ...  
    const {categories, error} = storeToRefs(useStore())
   
    const options = reactive<whatever>({
    ...
    category: '2'
    ...

    })

Leave a comment