如何将 bootstrap-vue-select 控件的值设置为在表单加载时预先 selected？

Question

我正在使用 VueJS，或者更准确地说 Bootsrap-Vue (select form type)。在模板中，我有以下代码：

<b-form-select>                   
  <option v-for="(selectOption, indexOpt) in item.select.options" 
         :selected="selectOption == item.select.selected ? 'selected' : ''"
         :key="indexOpt"
         :value="selectOption"
  >
    {{ selectOption }} - {{ selectOption == item.select.selected }}
  </option>
</b-form-select>

其中对应的数据定义为：

let item = {
  label: "some text goes here",
  inputType: 'text',
  select: {
      selected: '15',
      options: [
         '5',
         '10',
         '15',
         '20'
      ]
  }
}

从 UI 的输出中，我们可以看到条件已正确评估（检查项目“15”的条件正在返回 "true"）。 select 控件如下所示：

如果我检查 HTML 它看起来像：

BUT，我在这里需要的是，能够在加载控件期间，将传递的参数转换为“item.select.selected" 以实际显示 select 控件中的哪个选项是 select 之前的选项（在页面加载时）。在我尝试过的许多选项中，我的 select 控件在页面加载时未 selected。

有什么办法可以实现吗？

Answer 1

您可以将默认值直接绑定到 <select> 和 v-model。如果你将它绑定到 item.select.selected 它应该显示在 select.

<b-form-select v-model="item.select.selected">                   
    <option v-for="(selectOption, indexOpt) in item.select.options" 
        :key="indexOpt"
        :value="selectOption"
    >
        {{ selectOption }} - {{ selectOption == item.select.selected }}
    </option>
</b-form-select>

这是显示默认值的代码：https://jsfiddle.net/adampiziak/eywraw8t/146114/

文档：https://vuejs.org/v2/guide/forms.html#Select
另一个答案：

如何将 bootstrap-vue-select 控件的值设置为在表单加载时预先 selected？

How to set value from bootstrap-vue-select control to be pre-selected on form load?

select

vue.js

vuejs2

bootstrap-vue

vue-select