vuejs按钮在v-if中不可点击

Question

我遇到以下问题：当使用 v-if 将按钮置于条件渲染中时，它不再是 'clickable'。

    <div class="DoubleBtn" v-for="group in groups" :key="group.role">
                  <button v-if="group.role === 'student'"
                    type="button"
                    @click="removePresence()"
                    class="float-right btn btn-danger" >
                 
                    Out
                  </button>
                  <button v-if="group.role === 'student'"
                    type="button"
                    @click="updateRooms()"
                    class="float-right btn btn-success" >
                  
                    In
                  </button>
                </div>

感谢您的阅读！

Answer 1

为什么有两个 if statements 条件相同？可以尝试将两个按钮放在一个 if block 中，如下所示：

<div v-if="group.role === 'student'">

<button 
                    type="button"
                    @click="removePresence()"
                    class="float-right btn btn-danger" >
                 
                    Out
                  </button>
                  <button 
                    type="button"
                    @click="updateRooms()"
                    class="float-right btn btn-success" >
                  
                    In
                  </button>


</div>

vuejs按钮在v-if中不可点击

vuejs button not clickable when in v-if

button

vue.js