如何设置 Vue Core UI 选择值

Question

对于初学者的问题，我很抱歉，我是 Vue.js 的新手。我正在使用CoreUI。 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时，它不会返回选择框的值，而是返回：

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

对于上下文，这是在 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) 方法中，如何收集我的选择框的当前选定值？

Answer 1

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

价值

选择输入的值。设置 .sync 修饰符来跟踪道具变化。

他们似乎没有像预期的那样使用v-model，而且您可能还会收到关于value 属性不正确的错误。

将您的选择更改为：

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

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