Set first value in dropdown as default value in VueJs

Question

I want to make the first value of time Object as a default value for my dropdown. Whenever user enter the website, the first value has been selected as my default value. However, my current code only display the value but not selected yet on vue data. How can I do that?

time Object:-

{ "1290_1320":"21:30 - 22:00",
  "1320_1350":"22:00 - 22:30",
  "1350_1380":"22:30 - 23:00"
}

Dropdown HTML:-

<div class="form-group col-md-8">
   <select id="pickup" class="form-control" @change.prevent="changeTime($event)">
      <option selected="selected" v-for="(time, i) in this.timeslots" :key="i" 
       :value="time">{{time}}</option>
   </select>
</div>

Vue:-

export default {
  data() {
    return {
      selectedTime: null
    }
  },
  methods: {
     changeTime(event) {
       this.selectedTime = event.target.options[event.target.options.selectedIndex].text;
  }

Dropdown javascript:-

// remove "selected" from any options that might already be selected
$('#pickup option[selected="selected"]').each(
    function() {
        $(this).removeAttr('selected');
    }
);

// mark the first option as selected
$("#pickup option:first").attr('selected','selected');

Simply provide a v-model for the SELECT tag - and make sure the model variable is initialized with the first element in your array of options. — IVO GELOV
– IVO GELOV, Commented Aug 4, 2021 at 13:29
If i set <select v-model="selectedTime"></select> , then what should I set on my selectedTime in data() return ? :/ @IVOGELOV — cdogol
– cdogol, Commented Aug 4, 2021 at 13:31
If the time slots are predefined/hardcoded - then it must be equal to the value attribute of the first OPTION tag. IF you are fetching the slots by AJAX - initialize it with NULL and once you fetch the slots, assign it the key of the first slot in your Object. — IVO GELOV
– IVO GELOV, Commented Aug 4, 2021 at 13:34
the time will change dynamically, how can I set it to first value of dropdown for each time? @IVOGELOV sorry, i am new to this not really understand T-T — cdogol
– cdogol, Commented Aug 4, 2021 at 13:37

IVO GELOV · Accepted Answer · 2021-08-04 13:47:51Z

1

It depends on your particular usecase but generally you can do something like this:

<div class="form-group col-md-8">
   <select id="pickup" v-model="selectedTime" class="form-control">
      <option v-for="(timeValue, timeID) in timeslots" :key="timeID" :value="timeID">{{ timeValue }}</option>
   </select>
</div>

<script>
import axios from 'axios';

export default
{
  name: 'MyDropDown',
  data() 
  {
    return {
      selectedTime: null,
      timeSlots: {},
    }
  },
  created()
  {
    this.fetchData();
  },
  methods: 
  {
    fetchData()
    {
      axios.get('/api/getTimeSlots').then(response =>
      {
        this.timeSlots = response.data;
        this.selectedTime = Object.keys(response.data)[0];
      });
    },
  }
}

answered Aug 4, 2021 at 13:47

IVO GELOV

14.3k1 gold badge21 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Set first value in dropdown as default value in VueJs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related