How to set Vue Core UI select value - html

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?

Answer 1

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.