为将动态创建的 b-form-select 设置默认选择选项

Question

我有一个 Vuejs 应用程序，我正在使用 Bootstrap-vue。一些字段将根据用户偏好动态创建。

例如，我有一个 Skills 字段，用户可以单击该字段的 Add 按钮，该按钮将显示 2 个下拉菜单。这些字段将动态添加到应用程序中。我想确保所有动态创建的下拉菜单都选择了默认选项。

如果它是直接字段，那么我可以设置 null 值并将其设为默认值，但对于动态情况，我不知道该怎么做。

以下是我的代码：

<button class="btn-btn-info" @click="addSkill($event)"> Add Skill </button> 
<span v-for="skill in $store.state.skillsList" :key="skill.ID" class="form-inline">
    <span class="horizontalSpace">
        <b-form-select v-model="skillArray.skillType[skill.ID]" class="form-control" @change="addSkillInformation(skill.ID);">
            <b-form-select-option value="null" disabled>Choose</b-form-select-option>
            <b-form-select-option value="set">Set</b-form-select-option>
            <b-form-select-option value="unset">Unset</b-form-select-option>
        </b-form-select>
    </span>
</span>

我只想知道如何为所有将根据Add Skill 选项动态创建的下拉菜单选择Set 选项。

我尝试了selected，但它似乎不适合我。

Answer 1

我在jsfiddle 重新创建了您的代码。检查。它可以按需要工作。

所以我解释一下代码。

您需要自动选择一个默认值，这意味着相关数据属性（附加到 v-model）应该有一个值，该值也应该在选项列表中可用。所以我在这里所做的是 b-form-select 的 v-model 将使用空值进行预定义。如果您不知道将有多少动态选择，则在组件上动态设置该数据属性。意味着您可以在挂载/创建时启动数据。

代码

<div id="app">
  <div class="w-100">
           <b-form-select v-for="(skill,index) in skillsList" v-model="selectedSkills[index]" class="form-control" >
            <b-form-select-option value="null" disabled>Choose</b-form-select-option>
            <b-form-select-option value="set">Set</b-form-select-option>
            <b-form-select-option value="unset">Unset</b-form-select-option>
        </b-form-select>
</div>
</div>

脚本

 data() {
      return {
        selectedSkills : ['null','null','null'],
        skillsList : ['skill 01', 'skill 02', 'skill 03'],
      }
    },