Vue select - show list from specific option

Question

sI am making a Date selector of dropdowns. For a Year dropdown, I loop the options from 1900 to 2022. If I click on the dropdown it starts from 1990. But I want it to open from the middle of the list, let's say 1960 and scroll up or down.

<div class="col-4 pr-0">
  <select v-model="dobYear" id="year" type="text" placeholder="Year">
    <option value="">Year</option>
    <option v-for="year in years" :value="year">[[ year ]]</option>
  </select>
</div>

<option value="1970" selected>1970 </option> does not work - just show this option on top.

UPDATE

if I initialize dobYear to 1960 it gives me:

but I need to be:

2

and then when I click on it dropdown opens and starts from 1960.

I added a function @click

setToStartYear: function() {
  this.dobYear = 1960;
},

It kind of moves the list to 1960 but it won't let change the value of dobYear - stacks on 1960.

Answer 1

Initialize related model dobYear to 1960