类型错误：this.$refs 不是函数

Question

所以我对 VueJs 有疑问。我创建了一个“确认对话”并将其添加到按钮上的单击事件中。效果很好。

现在我尝试复制实现以将其添加到不同父级上的另一个按钮。每当我尝试单击按钮时，它都会在控制台中显示 “TypeError: this.$refs.confirmDialogue.show 不是函数”。另一个按钮仍然完全正常工作。

我错过了什么吗？我已经尝试删除工作按钮，因此只有一个组件使用确认对话，但这也不起作用。

我是 VueJ 新手。希望有人能帮助我解决这个问题。

子弹出模式：

<template>
    <transition name="fade">
        <div class="popup-modal" v-if="isVisible">
            <div class="window">
                <slot></slot>
            </div>
        </div>
    </transition>
</template>

<script>
export default {
    name: 'PopupModal',

    data: () => ({
        isVisible: false,
    }),

    methods: {
        open() {
            this.isVisible = true
        },

        close() {
            this.isVisible = false
        },
    },
}
</script>

<style scoped>
/* css class for the transition */
.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.3s;
}
.fade-enter,
.fade-leave-to {
    opacity: 0;
}

.popup-modal {
    background-color: rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    z-index: 1;
}

.window {
    background: #fff;
    border-radius: 5px;
    box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.2);
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
    padding: 1rem;
}
</style>

家长确认对话：

<template>
    <popup-modal ref="popup">
        <h2 style="margin-top: 0">{{ title }}</h2>
        <p>{{ message }}</p>
        <div class="btns">
            <button class="cancel-btn" @click="_cancel">{{ cancelButton }}</button>
            <span class="ok-btn" @click="_confirm">{{ okButton }}</span>
        </div>
    </popup-modal>
</template>

<script>
import PopupModal from "../confirmDialogue/PopupModal.vue"

export default {
    name: 'ConfirmDialogue',

    components: { PopupModal },

    data: () => ({
        // Parameters that change depending on the type of dialogue
        title: undefined,
        message: undefined, // Main text content
        okButton: undefined, // Text for confirm button; leave it empty because we don't know what we're using it for
        cancelButton: 'Abbrechen', // text for cancel button
        
        // Private variables
        resolvePromise: undefined,
        rejectPromise: undefined,
    }),

    methods: {
        show(opts = {}) {
            this.title = opts.title
            this.message = opts.message
            this.okButton = opts.okButton
            if (opts.cancelButton) {
                this.cancelButton = opts.cancelButton
            }
            // Once we set our config, we tell the popup modal to open
            this.$refs.popup.open()
            // Return promise so the caller can get results
            return new Promise((resolve, reject) => {
                this.resolvePromise = resolve
                this.rejectPromise = reject
            })
        },

        _confirm() {
            this.$refs.popup.close()
            this.resolvePromise(true)
        },

        _cancel() {
            this.$refs.popup.close()
            this.resolvePromise(false)
            // Or you can throw an error
            // this.rejectPromise(new Error('User cancelled the dialogue'))
        },
    },
}
</script>

<style scoped>
.btns {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.ok-btn {
    padding: 0.5em 1em;
    background-color: #1F51FF;
    color: #fff;
    border: 2px solid #0ec5a4;
    border-radius: 5px;
    font-size: 16px;
    text-transform: uppercase;
    cursor: pointer;
}

.cancel-btn {
    padding: 0.5em 1em;
    background-color: #d5eae7;
    color: #000;
    border: 2px solid #0ec5a4;
    border-radius: 5px;
    font-size: 16px;
    text-transform: uppercase;
    cursor: pointer;
}
</style>

工作按钮：

            <td class="last-td last-row">
                <div class="button-wrapper">
                    <div class="wrapper-edit">
                        <button class="button button-edit">Bearbeiten</button>
                    </div>
                    <div class="wrapper-cancel">
                        <button class="button button-cancel" @click="doDelete">Löschen</button> <!-- Here is the working button -->
                        <confirm-dialogue ref="confirmDialogue"></confirm-dialogue>
                    </div>
                </div>
            </td>
        </tr>
    </thead>
</template>

<script>
import ConfirmDialogue from '../confirmDialogue/ConfirmDialogue.vue'

export default {
    name: "bookingElements",

    components: { ConfirmDialogue },
    
    methods: {
        async doDelete() {
            const ok = await this.$refs.confirmDialogue.show({
                title: 'Buchung löschen',
                message: 'Sind Sie sicher, dass Sie die Buchung löschen wollen?',
                okButton: 'Buchung löschen',
            })
            if (ok) {
                alert('Die Buchung wurde Erfolgreich gelöscht')
            }
        },

不起作用的按钮：

            <td id="buttonCell">
                <button class="button" @click="doDelete">Buchen</button>
                <confirm-dialogue ref="confirmDialogue"></confirm-dialogue>
            </td>
        </tr>
    </tbody>
</template>

<script>
import ConfirmDialogue from "../confirmDialogue/ConfirmDialogue.vue"

export default {
    name: "bookElements",

    components: { ConfirmDialogue },

    methods: {
        async doDelete() {
            const ok = await this.$refs.confirmDialogue.show({
                title: 'Buchung löschen',
                message: 'Sind Sie sicher, dass Sie die Buchung löschen wollen?',
                okButton: 'Buchung löschen',
            })
            if (ok) {
                alert('Die Buchung wurde Erfolgreich gelöscht')
            }
        },

Answer 1

我发现错误了。

我创建了一个 for-each 循环来创建表。 但在工作按钮处没有 for-each 循环。

因此 VueJs 尝试生成确认对话 9 次，结果出现错误。

所以我只需要把

<confirm-dialogue ref="confirmDialogue"></confirm-dialogue>

像这样到模板顶部

<template>
    <confirm-dialogue ref="confirmDialogue"></confirm-dialogue>
    ...
</template>

因为它消失了并且仅在单击按钮时显示。

Answer 2

我也遇到同样的错误。

我在 this.$refs.clickedTd 上尝试了不同的功能

this.$refs.clickedTd.contains()
this.$refs.clickedTd.isSameNode()
this.$refs.clickedTd.isEqualNode()
...

他们都给了我同样的错误。我查了很多。

我控制台记录了 this.$refs.clickedTd 发现它是一个对象，但功能仍然无法正常工作。

好吧，最后我放弃了，转而使用普通的 javascript，从此过上了幸福的生活。

handleClickAnywhereOnPage(event) {
    let clickedTd = document.getElementById('clickedTd')
    if (clickedTd) {
        if (!clickedTd.contains(event.target)) {
            this.workerWhoseSourceBeingEdited = null;
            this.$forceUpdate();
        }
    }
}