Vue Unresolved Variable PhpStorm

问题

I have a Vue script. When I debug it with PhpStorm, I got Unresolved variable syntax error even though I set the variable redirect_to. Please check image. How can I solve it?

<script>
                const timeToRefetch = 2000;
                let intervalRef;

                const homePageUrl = "/";
                let messageCount = 0;


                var app = new Vue({
                    el: "#app",
                    data: {
                        status: "",
                        message: "",
                        redirect_to: ""
                    },
                    created() {
                        const refThis = this;
                        intervalRef = setInterval(() => {
                            fetch(ApiUrl)
                                .then(response => response.json())
                                .then(repos => {
                                        refThis.status = repos.status;
                                        this.message = repos.message;
                                        clearInterval(intervalRef);
                                        setTimeout(() => {
                                            window.location.href = repos.redirect_to;
                                        }, 3000);
                                    },
                                );
                        }, timeToRefetch);
                    }
                });
            </script>

回答1:

If you use some object with keys only known in runtime (generated, received through the ajax call, etc.) in your code, there is no way for the IDE to resolve them using static code analysis. But you can let the IDE know what your runtime data looks like. Possible solution using JSDoc annotations:

/**
     * @typedef {Object} repos
     * @property {string} status
     * @property {string} message
     * @property {string} redirect_to
     *
     */
...
 var app = new Vue({
        el: "#app",
        data: {
            status: "",
            message: "",
            redirect_to: ""
        },
        created() {
            const refThis = this;
            intervalRef = setInterval(() => {
                fetch(ApiUrl)
                    .then(response => response.json())
                    .then(
                        /**
                         * @param {repos} repos
                         */
                        (repos) => {
                            refThis.status = repos.status;
                            this.message = repos.message;
                            clearInterval(intervalRef);
                            setTimeout(() => {
                                window.location.href = repos.redirect_to;
                            }, 3000);
                        },
                    );
            }, timeToRefetch);
        }
    });

See also https://youtrack.jetbrains.com/issue/WEB-17419#comment=27-1058451, https://intellij-support.jetbrains.com/hc/en-us/community/posts/206349469-disable-unresolved-variable-on-json-object-received-by-ajax-call for other possible workarounds

来源：https://stackoverflow.com/questions/56819062/vue-unresolved-variable-phpstorm

标签

javascript

Vue.js

phpstorm

WebStorm