如果用户切换一个 div，那么其他切换的 div 应该自动关闭

Question

这里我写了一段 vue.js 代码。在这里，我试图实现切换 div。如果我将单击“每日交易”按钮，那么我将切换另一个 div。同样，我正在处理所有其他三个 div。它工作正常但我想增强此功能，例如如果用户单击一个按钮然后 div 将切换然后类似地如果用户单击另一个按钮来切换 div 然后以前切换 div 应该自动关闭如何在 vue.js 中实现这一点

<script>
    new Vue({
 el: '#category_app',
 data () {
   return {
     toggle: false,
     latestClassifieds: false,
     latestcomments: false,
   }
 },
})
</script>

<div>
    <div>
        <div @click='toggletwo = !toggletwo' class="dealOfDay">Deal of the day</div>
        <div v-show='toggletwo' class="DayListings">Deals of the day Listings</div>
    </div>

    <div>
        <div @click='latestClassifieds = !latestClassifieds' class="dealOfDay">Advertiser</div>
        <div v-show='latestClassifieds'>Advertise listings</div>
    </div>

    <div>
        <div @click='latestcomments = !latestcomments' class="dealOfDay">Latest Classifieds</div>
        <div v-show='latestcomments'>Latest classified listings</div>
    </div>
</div>

Answer 1

一个快速的解决方案可能是：

<script>
new Vue({
 el: '#category_app',
 data () {
   return {
     toggle: 1
   }
 }
})
</script>

<div>
    <div>
        <div @click='toggle = 1' class="dealOfDay">Deal of the day</div>
        <div v-show='toggle === 1' class="DayListings">Deals of the day Listings</div>
    </div>

    <div>
        <div @click='toggle = 2' class="dealOfDay">Advertiser</div>
        <div v-show='toggle === 2'>Advertise listings</div>
    </div>

    <div>
        <div @click='toggle = 3' class="dealOfDay">Latest Classifieds</div>
        <div v-show='toggle === 3'>Latest classified listings</div>
    </div>
</div>

如果您不想在页面加载后打开其中的任何一个，您可以将toggle 变量默认设置为0。