Vue - Переход на другую кнопку после @click

Часть моей системы включает в себя включение и отключение учетных записей. После того как я нажимаю кнопку "Отключить", я хочу, чтобы система динамически удаляла кнопку "Отключить" и заменяла ее кнопкой "Включить". Другими словами, замена кнопки на аналогичную кнопку, которая отменяет то, что я уже сделал

Я работаю в рамках Django и Vue, пожалуйста, посмотрите код ниже:

{% extends 'healthwithfriends/base.html' %}
{% block content %}
    <div id="app">
        <div class="container">
            <div class="contentContainer">
                {% csrf_token %}
                <div v-for="u in users">
                    <div class="row">
                        <div class="col-sm">
                            <h4 style="text-align: right">[[ u.username ]]</h4>
                        </div>
                        <div class="col-sm" id="u.id" style="text-align: left">
                            <button type="button" class="btn btn-danger" v-bind:id="u.id+'disable'" v-if="u.is_active" @click="updateStatus(u.id, 'disable')" style="margin-bottom: 0.5em">Disable</button>
                            <button type="button" class="btn btn-success" v-bind:id="u.id+'enable'" v-else @click="updateStatus(u.id, 'enable')" style="margin-bottom: 0.5em">Activate</button>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
    {% block scripts %}

Это JavaScript:

async updateStatus(id, status){
                        let response = await fetch(this.user[0].api, {
                            method: 'PUT_STATUS', // Method itself
                            body: JSON.stringify({'id': id,
                                'status': status,
                            }), // We send data in JSON format
                            headers: {
                                "Content-Type": "application/json",
                                "X-CSRFToken": document.querySelector("[name=csrfmiddlewaretoken]").value,
                            },
                        });
                        if(response.ok){
                            alert("User status updated.")
                            if (status === "disable"){
                                document.getElementById(id+"disable").hidden = true; // I want to hide.
                                document.getElementById(id+"enable").hidden = false; // I want to display.
                            }
                            else{
                                document.getElementById(id+"disable").hidden = false; // I want to hide.
                                document.getElementById(id+"enable").hidden = true; // I want to display.
                            }
                        }
                        else{
                            alert("STATUS NOT Updated");
                        }
                    }

До сих пор я пробовал гуглить это, но у меня не получается что-то, что работает в масштабе для всех пользователей.

Как вы можете видеть, каждая кнопка в HTML имеет уникальный id в теге HTML ID (который является ID каждого пользователя и его текущим статусом (либо 'enable', либо 'disable')).

Спасибо за ваше время.

Вернуться на верх