如何设置 Vue Core UI 选择值

Posted 2023-02-23

【中文标题】如何设置 Vue Core UI 选择值

【英文标题】：How to set Vue Core UI select value

【发布时间】：2021-05-16 14:18:27

【问题描述】：

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

【参考方案1】：

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

价值

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

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

将您的选择更改为：

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

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

【讨论】：

太棒了，确实有效。作为一个 VueJS 的菜鸟，直接跳入 CoreUI 并不是一个好主意，因为我不知道 VueJS 的哪些行为和 CoreUI 相关的行为——而且 CoreUI 文档对我来说也很陌生。不过谢谢..！

不客气。是的，他们的做事方式似乎有些不同。你不会发现很多图书馆像这样选择.sync 而不是v-model。