CODEWITHSUNDEEP
htmlvue.jsvuejs2vue-componentcore-ui
sf033
sf033

Reputation: 127

How to set Vue Core UI select value

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?

Upvotes: 2

Views: 1963

Answers (1)

Dan
Dan

Reputation: 63059

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.

Upvotes: 3

Related Questions