Vue 코어 UI 선택 값을 설정하는 방법

Vue 코어 UI 선택 값을 설정하는 방법

초보자 질문 미안해, 나 Vue.js 처음이야.나는 Core를 사용하고 있다.UI. 문서/코어의 설명UI+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 문서, 목록value받침대:

가치를 매기다

선택 입력 값.세트.sync프로펠러 변경을 추적하는 수식어

그들은 사용하지 않는 것 같다.v-model예상대로 그리고 아마 당신은 또한 에러를 가지고 있을 것이다.value틀린 것을 지지하다

선택 항목을 다음으로 변경:

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

이런 식으로 안내자가 지시하는 방식대로 수식어를 사용한다.

참조URL: https://stackoverflow.com/questions/66178490/how-to-set-vue-core-ui-select-value