So i have to select fields, one for 'days', another for 'hours'.

Selecting day one, user should then choose between two available slots, choosing day two, same as day one but different hours. The 'hours' select field should stay disabled till a choice is made on 'days' select. how can i achieve this? here's what i got so far, but can't seem to be able to enable the 'hours' 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>

CodePudding user response：

Try to set value to hoursActive not to compare:

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>