时间戳

首页 > 解决方案 > 将焦点设置为按钮时，无法读取 VUE 中未定义的属性“焦点”

vue.js - 将焦点设置为按钮时，无法读取 VUE 中未定义的属性“焦点”

问题描述

我是新手，如果失败，vue我会调用我的通用“错误”模式。所有这些工作正常，但我不断收到以下错误：componentendpoint

无法读取未定义的属性“焦点”

这只发生在else我的method function.

对于这个特定问题，我的 'failedPrcess' 等于以下任何一项，这是我得到的时候，所有其他人都很好：

代码

<template>
    <div class="modal fade danger-modal" id="errorModal" tabindex="-1" role="dialog" aria-labelledby="errorModalTitle" aria-hidden="true"
            data-keyboard="false" data-backdrop="static" style="z-index: 99999">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content danger-modal-content">
                <div class="modal-header danger-modal-headerfooter">An error has occurred</div>
                <div class="modal-body">
                    <p v-if="failedProcess === 'appGetAccount' || failedProcess === 'existOrderSearchProdOrders' || failedProcess === 'stockSearchStockLevels'
                            || failedProcess === 'cartFetchCouriers'">
                        {{ contactTxt | capitalize }}
                    </p>
                    <p v-else-if="errorCount < 3">If the error continues, {{ contactTxt }}</p>
                    <p v-else>As the error has continued, {{ contactTxt }}</p>
                    <p>
                        <b>
01234 567890
                            <br />
Open from 00:00 to 07:00
                        </b>
                    </p>
                    <p>Advising of what you were doing when the error occurred.</p>
                </div>
                <div class="modal-footer danger-modal-headerfooter">
                    <a v-if="failedProcess === 'appGetAccount'" ref="logoutButton" class="btn btn-primary" :class="logoutButtClicked" @click="logoutClicked = true" href="/site/logout">
                        <span v-if="!logoutClicked" id="logoutButtonLabel">Logout</span>
                        <span v-else id="logoutSpinner">
                        <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                            Logging out
                        </span>
                    </a>
                    <router-link v-else-if="failedProcess === 'fetchOrderReportDetails'" to="/review" tag="button"
                                    ref="existOrdersButton" class="btn btn-primary" type="button" data-dismiss="modal" @click.native="closeButton">
                        Return to existing orders
                    </router-link>
                    <button v-else-if="errorCount < 3 && (failedProcess !== 'productsFetchProducts' && failedProcess !== 'existOrderSearchProdOrders'
                            && failedProcess !== 'stockSearchStockLevels' && failedProcess !== 'cartFetchCouriers')" ref="closeButton" class="btn btn-primary"
                            type="button" data-dismiss="modal" @click="closeButton">
                        Close
                    </button>
                    <router-link v-else to="/" tag="button" ref="homeButton" class="btn btn-primary" type="button" data-dismiss="modal" @click="closeButton">
                        Return to homepage
                    </router-link>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import * as params from '../params';

export default {
    name: "ErrorModal",

    data() { 
        return {
            contactTxt: 'please contact us on:',
            errorCount: 0,
            failedProcess: '',        
        }
    },

    mounted() {
        VueEvent.$on('show-error-modal', (failedProcess) => {
            if (this.failedProcess !== failedProcess) {
                this.errorCount = 0;
            }

            this.failedProcess = failedProcess;

            $('#errorModal').modal('show').on('shown.bs.modal', this.focus);
        });
    },

    methods: {
        focus() {
            if (this.failedProcess === 'appGetAccount') {
                this.$refs.logoutButton.focus();
            } else if (this.failedProcess === 'fetchOrderReportDetails') {
                this.$refs.existOrdersButton.$el.focus();
            } else if (this.errorCount < 3 && this.failedProcess !== 'productsFetchProducts') {
                this.$refs.closeButton.focus();
            } else {
                this.$refs.homeButton.$el.focus();
            }
        },
    }
}
</script>`enter code here`

标签： vue.jsvuejs2

解决方案

我之前尝试过使用v-if，我也遇到过类似的问题，我发现最好的解决方案是，而不是使用v-if/ v-else-if/ v-else，而是使用v-show来执行条件渲染。

此外，正如 Vue.js 文档所说：

一般来说，v-if 的切换成本较高，而 v-show 的初始渲染成本较高。因此，如果您需要经常切换某些东西，则更喜欢 v-show，如果条件不太可能在运行时改变，则更喜欢 v-if。

推荐阅读