如何设置 Vue Core UI select 值

Question

抱歉初学者问题，我是 Vue.js 的新手。我正在使用 CoreUI。 Documentation/Tutorials CoreUI+Vue 上稀缺

我正在使用 <CForm> 标签，这里我有一个 <CSelect> 标签。

<CForm @submit="test" ref="form">
  <CSelect
    label="Pick a name"
    :options="['test', 'test1', 'test2']"
    v-model="testy"
  />
  
  <CButton type="submit" size="sm" color="primary"> Submit</CButton>
</CForm>

JavaScript:

methods: {
  test(e) {
    console.log("test");
    debugger;
    e.preventDefault();
  }
}

当我的断点被击中并且我检查 this.testy 它不会 return select 框的值而是这个：

我的印象是将 v-model 放在我的 CSelect 上会在 this.* 下暴露我的 select 框，我可以以某种方式轻松获得值（？！ ).

对于上下文，这是在 DOM:

中呈现的

<select id="uid-wvkj98yh6gp" class="form-control">
  <option data-key="0" value="test"> test </option>
  <option data-key="1" value="test1"> test1 </option>
  <option data-key="2" value="test2"> test2 </option>
</select>

我的问题：在我的 test(e) 方法中，如何收集 select 框的当前 selected 值？

Answer 1

在 <CSelect> API docs 中，它列出了 value 属性：

value

The value of select input. Set .sync modifier to track prop changes.

他们似乎没有按预期使用 v-model，您可能还收到有关 value 属性不正确的错误消息。

将您的 select 更改为：

<CSelect
  label="Pick a name"
  :options="['test', 'test1', 'test2']"
  :value.sync="testy"
/>

这样您就可以按照指南的指示使用 .sync 修饰符。

如何设置 Vue Core UI select 值

How to set Vue Core UI select value

html

vue.js

vuejs2

vue-component

core-ui