How to set Vue Core UI select value

Question

Sorry for the beginner question, I am new to Vue.js. I am using CoreUI. Documentation/Tutorials on CoreUI+Vue are scarce.

I am using the <CForm> tag and here I have a <CSelect> tag.

<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();
  }
}

When my breakpoint is hit and I inspect this.testy it will not return the value of the select box but instead this:

I was under the impression that putting v-model on my CSelect will expose my select box under this.* and I could somehow easily get the value (?!).

For context this is rendered in the 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>

My question: inside my test(e) method, how can I gather the current selected value of my select box?

tony19 · Accepted Answer · 2022-07-15 21:49:29Z

3

In the <CSelect> API docs, it lists the value prop:

value

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

It seems they don't use v-model as expected and you probably also got an error about the value prop being incorrect.

Change your select to:

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

This way you use the .sync modifier the way the guide directs.

edited Jul 15, 2022 at 21:49

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Feb 12, 2021 at 20:32

Dan

63.5k18 gold badges113 silver badges122 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

sf033 Over a year ago

Awesome, that did work. As a total noob with VueJS it wasn't a good idea to jump straight into CoreUI, because I don't know which behaviour is VueJS and which is CoreUI related - and also the CoreUI docs are quite alien to me. Thanks though..!

Dan Over a year ago

You're welcome. Yeah it seems they do things a little differently. You won't find many libraries opting for .sync over v-model like this.

Collectives™ on Stack Overflow

How to set Vue Core UI select value

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related