Vue选择,预选选项

时间:2019-10-25 13:20:46

标签: javascript vue.js

我有两个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"}

  ],

0 个答案:

没有答案