그래서 ‘일’에 해당하는 필드, ‘시간’에 해당하는 필드를 선택해야 합니다.
1일째를 선택하면 사용자는 2개의 사용 가능한 슬롯 중 하나를 선택하고 2일째를 1일째와 동일하지만 다른 시간으로 선택해야 합니다.‘hours’ select 필드는 ‘days’ select에서 선택될 때까지 비활성화 상태로 있어야 합니다.내가 어떻게 이것을 이룰 수 있을까?지금까지 얻은 정보는 다음과 같습니다만, 「시간」선택을 유효하게 할 수 없는 것 같습니다.
<template>
<div id="app">
<select name="days" id="days" @change=submitDate >
<option value="" disabled selected>select day</option>
<option v-for="(value, name, index) in dates" value="">{{name}}</option>
</select> <select name="hours" id="hours" :disabled = "!hoursActive">
<option value="" disabled selected>select hour</option>
<option value="">hora 1</option>
<option value="">hora 2</option> </select>
</div> </template>
<script> export default {
data() {
return {
hoursActive: false,
dates: {
"day 1": ["08:00","09:00"],
"day 2": ["18:00","19:00"]
}
};
},
methods: {
submitDate: function() {
console.log("triggered");
this.hoursActive === true;
console.log(this.hoursActive);
}
} }; </script>
<!-- Use preprocessors via the lang attribute! e.g. <style lang="scss"> --> <style> #app {
font-family: Avenir, Helvetica, Arial, sans-serif;
text-align: center;
color: #2c3e50;
margin-top: 60px; }
a, button {
color: #4fc08d; }
button {
background: none;
border: solid 1px;
border-radius: 2em;
font: inherit;
padding: 0.75em 2em; } </style>
질문에 대한 답변
값 설정 시도:hoursActive비교 안 함:
new Vue({
el: '#app',
data() {
return {
hoursActive: false,
dates: {
"day 1": ["08:00","09:00"],
"day 2": ["18:00","19:00"]
},
selectedDate: {date: '', time: ''}
};
},
computed: {
getHours() {
return this.dates[this.selectedDate.date]
}
},
methods: {
submitDate() {
this.selectedDate.time = ''
this.hoursActive = true;
},
} })#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
text-align: center;
color: #2c3e50;
margin-top: 60px; }<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app">
selectedDate: {{ selectedDate }}
<br /><br />
<select name="days" id="days" v-model="selectedDate.date" @change=submitDate >
<option value="" disabled selected>select day</option>
<option v-for="(value, name, index) in dates" :key="index" :value="name">{{ name }}</option>
</select>
<select name="hours" id="hours" :disabled="!hoursActive" v-model="selectedDate.time">
<option value="" disabled selected>select hour</option>
<option v-for="(hour, i) in getHours" :key="i" :value="hour">{{ hour }}</option>
</select> </div>