如何使用 Vue js 将 div 替换为 html onclick？

Question

我在 div 中有一个响应按钮，并附有一个 Modal。

<div v-if="notification ? notification.type === 'App\\Notifications\\InterviewRequestEmployerReply' : ''">
    <button class="btn btn-primary btn-sm text-right" @click="editNotificationRequest(notification)">Respond</button>
</div>

如果用户单击“确认采访”按钮，则响应按钮应替换为此 <strong class="text-success">Confirmed</strong>。

我有一个名为createConfirmedInterviewRequest() 的方法，当用户单击“确认面试”按钮时会调用该方法。所以我想创建一个可以更改内容的方法，然后我会在我的createConfirmedInterviewRequest() 方法中调用该方法，但我不知道如何创建此方法或如何做到这一点。

附件是我的页面的屏幕截图，其中包含响应按钮和模式。

如何使用 Vue 更改 div 的内容？

更新：

data() {
            return {
                notifications: {
                    noti: false
                },
            }
},

computed:{
            computedConfirm(){
                return this.notifications.noti ? true:false;
            }
        },

methods: {
            confirmProcess(){
                this.notifications.noti = true;
            },
}

我的方法：

createConfirmedInterviewRequest: async function() {
   this.confirmProcess(`data`);
}

带按钮的模态：

<b-button type="submit" variant="success" @click="confirmProcess(`data`)" class="mr-2 mt-2">
   <i class="fas fa-handshake"></i>Confirm Interview
</b-button>

我想消失的回复按钮并替换为<strong class="text-success">Confirmed</strong>。

<div v-if="notification ? notification.type === 'App\\Notifications\\InterviewRequestEmployerReply' : ''">
                        <button class="btn btn-primary btn-sm text-right" @click="editNotificationRequest(notification)" v-if="!computedConfirm">Respond</button>

如果您需要了解通知中的数据属性，请告诉我。

Answer 1

使用v-if，v-else，条件会在你的editNotificationRequest方法中改变：

<div v-if="notification ? notification.type === 'App\\Notifications\\InterviewRequestEmployerReply' : ''">
    <button v-if="clickConfirmed" class="btn btn-primary btn-sm text-right" @click="editNotificationRequest(notification)">Respond</button>
    <strong v-else class="text-success">Confirmed</strong>
</div>