Vuejs2 是否使用Vuejs有条件地显示选择器（节）？

我试图做到以下几点：我有一个模态内部和内部我有一个日期选择器和时间选择器。我只想一次展示一个。因此，当我点击日期选择器内的按钮时，时间选择器就会出现，反之亦然

我已经在时间选择器上设置了v-if，但它没有按预期的方式工作。 这是一个密码笔：

{{computedDateFormattedMomentjs}{{time1
}} 
今天的日历
存取时间
取消
好啊
新Vue({
el:“#应用程序”，
数据：（）=>({
日期：新日期（）.toISOString（）.substr（0,10），
time1:null，
模态2：错，
模式1：错误
}),
计算：{
computedDateFormattedMomentjs（）{
返回this.date？time（this.date）。格式（'MMMM Do，YYYY'）：“”
},
computedDateFormattedDatefns（）{
返回this.date？格式（this.date，'MMMM Do，YYYY'）：“”
}
},
方法：{
toggleTimePicker（）{
this.modal1=false
}
}
})

---

提前谢谢大家。

这里的问题是您正在使用

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>

{{computedDateFormattedMomentjs}{{time1}}
今天的日历
存取时间
取消
好啊

这里的问题是，您正在使用

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>

{{computedDateFormattedMomentjs}{{time1}}
今天的日历
存取时间
取消
好啊

这更像是一个后续问题，你知道我如何让它发生吗？这样每次我关闭它时，日期选择器都会首先出现。现在，如果我单击外部或关闭它，重新打开时会显示最后一个选择器。当然，在设置

modal1=false

之前，您可以调用方法

onClose

来设置

modal2=false

，或者使用

watcher

设置

modal2=false

当

modal1

设置为

false

时，我刚刚注意到了这一点，当我在窗口外单击时，如何设置日期选择器。现在，我必须单击图标本身来设置modal2=false。您需要检查vuetify是否提供了可在模式关闭时使用的事件。这更像是一个后续问题，您知道我如何实现它，以便每次关闭它时，日期选择器都会首先出现。现在，如果我单击外部或关闭它，重新打开时会显示最后一个选择器。当然，在设置

modal1=false

之前，您可以调用方法

onClose

来设置

modal2=false

，或者使用

watcher

设置

modal2=false

当

modal1

设置为

false

时，我刚刚注意到了这一点，当我在窗口外单击时，如何设置日期选择器。现在，我必须单击图标本身来设置modal2=false。您需要检查vuetify是否提供了可在模式关闭时使用的事件。