使用 Vuejs 有条件地显示 Picker(section)？

Question

我正在尝试实现以下目标：我有一个内部和内部的模态我有一个日期选择器和一个时间选择器。我只想一次显示一个。所以当我点击日期选择器内的按钮时，时间选择器应该会出现，反之亦然。

我已经在时间选择器上设置了 v-if，但它没有按预期工作。 这是一个代码笔：https://codepen.io/anon/pen/NVmZRK?editors=1010

<div id="app">
   <v-app id="inspire">
   <span class="title mb-3">  {{ computedDateFormattedMomentjs }} {{ time1 
}} </span>
   <v-layout>
    <v-btn @click.stop = "modal1 = true">
      <v-icon> calendar_today </v-icon>
      </v-btn>
    <v-dialog
     v-model="modal1"
     transition="scale-transition"
     width="300px">      
     <v-date-picker v-model="date">
      <v-spacer></v-spacer>
      <v-btn @click.stop="toggleTimePicker">
          <v-icon>access_time</v-icon>
      </v-btn>
       </v-date-picker>
      <v-time-picker v-model="time1" v-if="modal1 != true">
         <v-spacer></v-spacer>
         <v-btn flat color="primary" @click="modal1 = false" >Cancel</v-btn>
        <v-btn flat color="primary" @click="modal1 = false"  >OK</v-btn>
    </v-time-picker>
    </v-dialog>
  </v-layout>
   </v-app>
 </div>

 <script>
    new Vue({
  el: '#app',
  data: () => ({
   date: new Date().toISOString().substr(0, 10),
   time1: null,
   modal2: false,
   modal1: false
  }),

  computed: {
   computedDateFormattedMomentjs () {
  return this.date ? moment(this.date).format('MMMM Do, YYYY') : ''
  },
  computedDateFormattedDatefns () {
  return this.date ? format(this.date, 'MMMM Do, YYYY') : ''
   }
 },
 methods: {
   toggleTimePicker() {
    this.modal1 = false
  }
 }
})
 </script>

提前谢谢大家。

Answer 1

这里的问题是您使用modal1 绑定您的对话框和您的v-time-picker。当modal1 为真时，将显示您的对话框和日期选择器。当您切换时，您会将 modal1 false 隐藏起来！。

首先要做的是使用其他数据属性modal2 或类似的东西，然后使用v-if 和v-else 在日期选择器和时间选择器之间切换：

注意v-if 和v-else

<v-date-picker v-model="date" v-if="!modal2">
    <v-spacer></v-spacer>
    <v-btn @click.stop="toggleTimePicker">
        <v-icon>access_time</v-icon>
    </v-btn>
</v-date-picker>
<v-time-picker v-model="time1" v-else>
    <v-spacer></v-spacer>
    <v-btn flat color="primary" @click="modal1 = false" >Cancel</v-btn>
    <v-btn flat color="primary" @click="modal1 = false"  >OK</v-btn>
</v-time-picker>

Vue.use(Vuetify);

new Vue({
  el: '#app',
  data: () => ({
    date: new Date().toISOString().substr(0, 10),
    time1: null,
    modal2: false,
    modal1: false
  }),

  computed: {
    computedDateFormattedMomentjs () {
      return this.date ? moment(this.date).format('MMMM Do, YYYY') : ''
    },
    computedDateFormattedDatefns () {
      return this.date ? format(this.date, 'MMMM Do, YYYY') : ''
    }
  },
  methods: {
    toggleTimePicker() {
      this.modal2 = !this.modal2;
    }
  }
})

<link href="https://cdn.jsdelivr.net/npm/vuetify@1.5.14/dist/vuetify.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.25/moment-timezone.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.18/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.5.14/dist/vuetify.min.js"></script>

<div id="app">
  <v-app id="inspire">
    <span class="title mb-3">  {{ computedDateFormattedMomentjs }} {{ time1 }} </span>
    <v-layout>
        <v-btn @click.stop = "modal1 = true">
          <v-icon> calendar_today </v-icon>
          </v-btn>
        <v-dialog
         v-model="modal1"
         transition="scale-transition"
         width="300px">      
         <v-date-picker v-model="date" v-if="!modal2">
          <v-spacer></v-spacer>
          <v-btn @click.stop="toggleTimePicker">
              <v-icon>access_time</v-icon>
          </v-btn>
          </v-date-picker>
          <v-time-picker v-model="time1" v-else>
             <v-spacer></v-spacer>
             <v-btn flat color="primary" @click="modal1 = false" >Cancel</v-btn>
            <v-btn flat color="primary" @click="modal1 = false"  >OK</v-btn>
        </v-time-picker>
        </v-dialog>
    </v-layout>
  </v-app>
</div>