按鈕類的刪除不會立即呈現

Question

我有一個Vue應用，可在屏幕上呈現一個按鈕。 我正在Bulma中使用CSS。 頁面加載時，按鈕應該是帶有白色字母的純紅色，這是應該的，因為沒有“ is-outlined”類。 當我單擊按鈕時，應該添加“ is-outlined”類，然后將按鈕呈現為紅色文本和白色背景上的邊框。 這是當我單擊按鈕時發生的事情：

1. 屏幕上的數據消失了，因為我不想顯示它們（這意味着click事件正在執行它需要做的事情。而且，頁面的其余部分正在工作。）
2. 在chrome的檢查器中，按預期，我將立即將is-outline概述類添加到按鈕css中。
3. 該按鈕不會更改為輪廓樣式。

但是，一旦我單擊其他按鈕將焦點移到該按鈕上，該css就被“渲染”，並且我得到一個概述的按鈕。 不管我做什么（單擊屏幕，單擊其他窗口或桌面），只要執行其他操作，按鈕就會根據剛添加的類更改顏色。

如果再次單擊該按鈕，則該類將被刪除，該按鈕將立即更新回到紅色背景上的白色文本。 （無需單擊按鈕。）

那么，當我添加一個類（無立即結果）和刪除類（即刻響應）時，渲染的區別是什么？

使用完整組件進行了更新（對於Vue還是新手，因此可能不是最佳選擇）

<template>
<div id="app">
    <div class="columns">
        <div class="column is-three-quarters">
            <div>
                <button @click.stop="toggleUnLinked" id="show-unlinked" class="button is-small is-danger" :class="{'is-outlined': !this.showUnLinked}">
                    <span v-if="this.showUnLinked">Hide Unlinked </span>
                    <span v-else>Show Unlinked </span> ({{ this.unlinkedCount }})
                </button>
                <button @click.stop="toggleIgnored" id="show-ignored" class="button is-small is-dark"  :class="{'is-outlined': !this.showIgnored}">
                    <span v-if="this.showIgnored">Hide Ignored </span>
                    <span v-else>Show Ignored </span> ({{ this.ignoredCount }})
                </button>
                <button @click.stop="toggleLinked" id="show-linked"  class="button is-small is-success"   :class="{'is-outlined': !this.showLinked}">
                    <span v-if="this.showLinked">Hide Linked </span>
                    <span v-else>Show Linked </span> ({{ this.linkedCount }})
                </button>
            </div>

            <contact-modal v-if="showModal"
                           :team="current"
                           @close="showModal=false"
                           @saveLink="saveLink"
                           @keyup.esc="onEsc()"
            ></contact-modal>
            <table class="table table-striped">
                <thead>
                <tr>
                    <th>Name</th>
                    <th>PCO ID</th>
                    <th>Contact ID</th>
                    <th>Actions</th>
                </tr>
                </thead>
                <tbody>
                <person-component
                        v-for="(person, index)  in people"
                        v-if="unlinkedFilter(person.status) || linkedFilter(person.status) || ignoreFilter(person.status)"
                        v-bind="person"
                        :index="index"
                        :key="person.id"
                        @linkMenu="linkMenu"
                        @unlink="unlink"
                        @ignore="ignore"
                        @restore="restore"
                ></person-component>
                </tbody>
            </table>
        </div>
    </div>
</div>
</template>

<script>

function Person({id, account_id, domain_id, first_name, last_name, nickname, gender, email, phone, pco_id,
                    legacy_pco_id, contact_id, household_id, status}) {

    this.id = parseInt(id);
    this.domain_id = parseInt(domain_id);
    this.account_id = parseInt(account_id);
    this.first_name = first_name;
    this.last_name = last_name;
    this.nickname = nickname;
    this.gender = gender;
    this.email = email;
    this.phone = phone;
    this.pco_id = pco_id;
    this.legacy_pco_id = legacy_pco_id;
    this.contact_id = parseInt(contact_id);
    this.household_id = parseInt(household_id);
    this.status = status;
}

import PersonComponent from './Person.vue';
import ContactModal from './ContactModal.vue';

export default {
    data() {
        return {
            people: [],
            working: false,
            serverError: false,
            showModal: false,
            showIgnored: false,
            showLinked: false,
            showUnLinked: true,
            current: null,
            ignoredCount: 0,
            unlinkedCount: 0,
            linkedCount: 0
        }
    },
    methods: {
        read() {
            this.mute = true;
            this.people = [];
            window.axios.get('/api/people').then(({data}) => {
                data.forEach(person => {
                    this.people.push(new Person(person));
                });
                this.mute = false;
                this.updateCounts();
            });
        },
        linkMenu(id) {
            this.current = this.people.find(function (element) {
                return element.id == id;
            });
            this.showModal = true;
        },
        saveLink(linkDef) {
            this.showModal = false;
            window.axios.post('/api/people', linkDef)
                .then(response => {
                    this.people.find(people => people.pco_id === linkDef.pco_id).contact_id = linkDef.contact_id;
                    // this.people.find(people => people.pco_id === linkDef.pco_id).group_name = linkDef.group_name;
                    this.updateCounts();
                })
                .catch((error) => {
                    this.handle(error);
                });
        },
        unlink(id) {
            this.mute = true;
            window.axios.delete('/api/people/' + id).then(({response}) => {
                this.people.find(person => person.id === id).contact_id = null;
                // this.people.find(person => person.id === id).group_name = null;
                this.mute = false;
                this.updateCounts();
            });
        },
        ignore(id) {
            this.mute = true;
            window.axios.post('/api/people/' + id + '/ignore', {_method: 'delete'}).then(({response}) => {
                let index = this.people.findIndex(person => person.id === id);
                this.people[index].status = 0;
                this.mute = false;
                this.updateCounts();
            });
        },
        restore(id) {
            this.mute = true;
            window.axios.get('/api/people/' + id + '/restore').then(({response}) => {
                let index = this.people.findIndex(person => person.id === id);
                this.people[index].status = 1;
                this.mute = false;
                this.updateCounts();
            });
        },
        updateCounts(){
            let ic = 0; let uc = 0; let lc = 0;

            this.people.forEach(function(element){
                if (element.status == 0 ) { ic++; }
                else if (element.status == 1 ) { uc++; }
                else if (element.status == 2 ) { lc++; }
            });

            this.ignoredCount = ic;
            this.unlinkedCount = uc;
            this.linkedCount = lc;
        },
        toggleIgnored() {
            this.showIgnored = !this.showIgnored;
        },
        toggleLinked() {
            this.showLinked = !this.showLinked;
        },
        toggleUnLinked() {
            this.showUnLinked = !this.showUnLinked;
        },
        ignoreFilter(status) {
            return (status == 0 && this.showIgnored) ? true : false;
        },
        unlinkedFilter(status) {
            return (status == 1 && this.showUnLinked) ? true : false;
        },
        linkedFilter(status) {
            return (status == 2 && this.showLinked) ? true : false;
        },
        close() {
            this.showModal = false;
        },
        onEsc() {
            this.showModal = false;
        },
        handle(error) {
            this.serverError = true;
            if (error.response) {
                // The request was made and the server responded with a status code
                // that falls out of the range of 2xx
                console.log(error.response.data);
                console.log(error.response.status);
                console.log(error.response.headers);
            } else if (error.request) {
                // The request was made but no response was received
                // `error.request` is an instance of XMLHttpRequest in the browser and an instance of
                // http.ClientRequest in node.js
                console.log(error.request);
            } else {
                // Something happened in setting up the request that triggered an Error
                console.log('Error', error.message);
            }
            console.log(error.config);
        }
    },
    watch: {
        mute(val) {
            document.getElementById('mute').className = val ? "on" : "";
        }
    },
    components: {
        PersonComponent,
        ContactModal
    },
    created() {
        this.read();
    }
}
</script>
<style>
#app {
    margin-left: 1em;
}

.heading h1 {
    margin-bottom: 0;
}
</style>

任何幫助將不勝感激。

Answer 1

使用@ click.stop停止傳播，否則，您將卡住所有click事件

Answer 2

我找到了問題和解決方案。 在我離開按鈕之前，按鈕一直沒有更改為輪廓樣式，因為按鈕仍然處於“聚焦”狀態，並且呈現了聚焦樣式。 這是在Chrome中發生的，下面是發生了什么的更好的解釋：

“按鈕不是集中於活動狀態，而是具有：focus偽類樣式。Chrome似乎在單擊按鈕時使按鈕集中，而其他按鈕則沒有。”

https://github.com/jgthms/bulma/issues/482

我通過將按鈕轉換為錨點並使用按鈕樣式來“解決”我的問題。 鏈接與鑲邊按鈕的處理方式不同。