Vue Unresolved Variable PhpStorm

Question

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>

lena · Accepted Answer · 2019-06-29 17:04:33Z

6

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

answered Jun 29, 2019 at 17:04

lena

94.4k11 gold badges154 silver badges160 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

rmirabelle Over a year ago

Never saw the @property hint before - awesome!

martins16321 Over a year ago

It is probably much better to use TypeScript

Collectives™ on Stack Overflow

Vue Unresolved Variable PhpStorm

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related