반응형
Vuejs2의 선택 태그에서 계산된 v-model
마크업이 다음과 같은 컴포넌트가 있습니다.
<select id="create-claim-start_date" type="text" class="form-control" v-model="startPeriod">
<option value="0">January</option>
<option value="3">April</option>
<option value="6">July</option>
<option value="8">October</option>
</select>
어디에startPeriod
계산된 속성입니다.
..........
data() {
return { form: { claim_start_date: null } }
},
computed: {
startPeriod: {
get: function(){
var d = window.moment();
return d.get('month');
},
set: function(p) {
var dt = window.moment()
dt.set(p,'month');
this.form.claim_start_date = dt.get('YYYY-mm-dd');
}
}
}
........
계산된 속성을 모델로 사용할 수 있습니까?계산된 속성이 데이터 속성 업데이트를 트리거합니까?
값을 갱신할 필요가 있는 경우claim_start_date
선택이 변경되면 워처를 사용할 수 있습니다.
다음은 예를 제시하겠습니다.
var app = new Vue({
el: '#app',
data: {
startPeriod: '0',
form: {
claim_start_date: 'defaultValue'
}
},
watch: {
startPeriod: function(newValue, oldValue) {
this.form.claim_start_date = "new value " + newValue;
}
}
})
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.0/moment.min.js"></script>
<div id="app">
<select id="create-claim-start_date" type="text" class="form-control" v-model="startPeriod">
<option value="0">January</option>
<option value="3">April</option>
<option value="6">July</option>
<option value="8">October</option>
</select>
{{form.claim_start_date}}
</div>
이 값을 사용하고 있는 것 같고, 나중에 이 값을 사용하여 Moment 개체를 만들 예정입니다.우선 옵션 값에 날짜/순간 개체를 사용하는 것이 더 쉬울 수 있습니까?
javascript 값(오브젝트)을 옵션 값에 바인딩할 수 있습니다.날짜를 모르기 때문에 날짜 설정 방법을 조정해야 할 수도 있습니다.
<select id="create-claim-start_date" class="form-control" v-model="startPeriod">
<option :value="moment('2016-01-01')">January</option>
<option :value="moment('2016-04-01')">April</option>
<option :value="moment('2016-07-01')">July</option>
<option :value="moment('2016-10-01')">October</option>
</select>
언급URL : https://stackoverflow.com/questions/40875969/computed-v-model-in-select-tag-in-vuejs2
반응형
'programing' 카테고리의 다른 글
농담으로 Vue 장치 테스트 vuex 저장소 작업 (0) | 2022.08.25 |
---|---|
계산된 속성에 대해 형식 설명/Vuej가 컴파일되지 않음 (0) | 2022.08.25 |
Kotlin 소스 파일을 Java 소스 파일로 변환하는 방법 (0) | 2022.08.25 |
java.util은 왜 안 돼?get(int 인덱스)를 설정하시겠습니까? (0) | 2022.08.25 |
C/C++에 표준 기호 함수(signum, sgn)가 있습니까? (0) | 2022.08.25 |