Vue Unresolved Variable PhpStorm Vue Unresolved Variable PhpStorm vue.js vue.js

Vue Unresolved Variable PhpStorm


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