javascript - 按钮类删除不会立即呈现

Question

我有一个在屏幕上呈现按钮的 Vue 应用程序。我正在将 Bulma 用于 CSS。当页面加载时，按钮是纯红色和白色字母，因为没有“is-outlined”类。当我单击按钮时，它应该添加“is-outlined”类，然后将按钮呈现为白色背景上的红色文本和边框。这是当我点击按钮时发生的事情:

1. 屏幕上的数据消失了，因为我不想显示它们(这意味着点击事件正在做它需要做的事情。而且，页面的其余部分正在工作。)
2. 在 chrome 的检查器中，我看到 is-outlined 类立即添加到按钮 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 停止传播，否则您将捕获所有点击事件