如何设置 Vue Core UI 选择值

如何解决如何设置 Vue Core UI 选择值

抱歉初学者的问题，我是 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) 方法中，如何收集选择框的当前选定值？

解决方法

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

价值

选择输入的值。设置 .sync 修饰符以跟踪道具更改。

他们似乎没有按预期使用 v-model，您可能还会收到关于 value 道具不正确的错误。

将您的选择更改为：

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

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