반응형
선택 항목을 사용할 때 문자열이 아닌 부울을 반환하는 방법
나 이거 있어.-
<div class="form-group">
<label for="">Allow Multiple</label>
<select class="form-control" v-model="allowMultiple">
<option value=true>Yes</option>
<option value=false>No</option>
</select>
</div>
나는 설정했다.allowMultiple=true
초기화할 때, 아니오를 선택하면allowMultiple='false'
그럼 이제 부울이 아니라 스트링?어떻게 하면 부울이 될 수 있을까?
HTML에서 태그에 속성 값을 설정하면 값은 기본 유형--string
.그래서 vue를 사용할 수 있다.v-model
예를 들어 부울, 숫자 등 다른 유형 값에 바인딩하십시오.다음 코드가 작동하면 원하는 결과가 나타남
new Vue({
el:'#app',
data: {
allowMultiple: false
},
methods: {
print: function () {
alert(this.allowMultiple);
}
}
})
<div class="form-group" id='app'>
<label for="">Allow Multiple</label>
<select class="form-control" v-model="allowMultiple" @change='print'>
<option :value='true'>Yes</option>
<option :value='false'>No</option>
</select>
</div>
<script src="https://unpkg.com/vue@2.4.2/dist/vue.min.js"></script>
부에에서 그것을 하는 방법은 다음과 같다.html로 옵션을 하드 코딩하는 대신Vue 방법을 사용하여 Vue 데이터에 옵션 배열을 설정한 다음v-for
배열에서 모든 옵션을 렌더링하십시오.
각 옵션에는 텍스트와 값의 두 가지 속성이 있어야 한다.값은 찾고 있는 부울 값이어야 한다.
이제 사용자가 선택한 옵션을 변경할 때마다 항상 부울이 된다.
new Vue({
el: '#app',
data: {
allowMultiple: true,
options: [
{text: 'Yes', value: true},
{text: 'No', value: false},
],
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<div id="app">
<div class="form-group">
<div>Allow multiple: {{allowMultiple}} [Type: {{typeof allowMultiple}}]</div><br>
<label for="">Allow Multiple</label>
<select class="form-control" v-model="allowMultiple">
<option v-for="option in options" :value="option.value">{{option.text}}</option>
</select>
</div>
</div>
더 쉽고 빠르게 내게 효과가 있는 방법을 찾아낸 방법은 다음과 같다.
<select id="selected" v-model="item.selected">
<option :value=0>No</option>
<option :value=1>Yes</option>
</select>
누구에게나 쓸모가 있을지도 몰라.
다음을 시도해 보십시오.
<option value=1>Yes</option>
<option value=0>No</option>
참조URL: https://stackoverflow.com/questions/45264923/how-to-return-boolean-and-not-string-when-using-select
반응형
'Programing' 카테고리의 다른 글
vue에서 {ref}을(를) 가져오는 동안 오류가 발생하는 중? (0) | 2022.05.19 |
---|---|
사용자 정의 유효성 검사 규칙이 작동하지 않음 (0) | 2022.05.19 |
깃털 아이콘 사용량(Vue).JS (0) | 2022.05.19 |
웹 팩/npm/연실이 없는 Vue 구성 요소 (0) | 2022.05.19 |
Builder Pattern을 언제 사용하시겠습니까? (0) | 2022.05.19 |