javascript - vue select，预选选项

Question

我有两个 Vue 选择实例，它们运行良好。一个是用硬编码选项填充的，另一个是通过 axios 返回对象填充的，但两者都在 for 循环中正确填充了选项。

我唯一剩下的问题是，我很难让他们加载默认的预选选项。假设我想taskTypes默认加载值为 3 并taskLocations预先选择值为 10，我很难找到在 Vue 中执行此操作的方法

我尝试在返回中设置 taskLocations.value 并且类型相同，但它不加载任何值

<div class="form-group col-lg-6">
    <label>Locations</label>
    <select class="form-control" v-model="taskLocations" id="taskLocations" @change="handleLocationSelect">
      <option v-for="locationOption in locationOptions" v-bind:value="locationOption.id">{{ locationOption.name }}</option>
    </select>
</div>

<div class="form-group col-lg-3">
    <label>Choose Task Type</label>
    <select class="form-control" v-model="taskTypes" id="taskTypes" @change="handleTypeSelect">
     <option v-for="taskTypeOption in taskTypeOptions" v-bind:value="taskTypeOption.value">{{ taskTypeOption.name }}</option>
    </select>
</div>

  locationOptions: [],
  taskLocations: [],
  taskTypes: []
  taskTypeOptions: [
    {value:1, name:"PM"},
    {value:2, name:"OD"},
    {value:3, name:"All"}

  ],

标签： javascriptvue.js