Ошибка говорит, что queryResult не определен, даже если queryResult содержит данные - PullRequest
Новая
       36

Ошибка говорит, что queryResult не определен, даже если queryResult содержит данные

0 голосов
/ 10 ноября 2019

Я получаю некоторые данные из моего бэкэнда и сохраняю их в переменную queryResult. Но всякий раз, когда я нажимаю кнопку запроса на моей веб-странице, код возвращает сообщение об ошибке «Ошибка при отображении:

TypeError: Невозможно прочитать свойство 'title' из неопределенного

Консольвыход из него показывает, что queryResult действительно содержит данные. Я не эксперт, но кажется, что страница получает доступ к queryResult до того, как она будет заполнена?

Это сбивает с толку, так как страница не должна повторно отображаться при изменении некоторых данных, то есть когда queryResult изменения?

Вот мой код. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Tushar's Simple Cloud Application</title>
    <style>
        table, th, td {
            border: 1px solid black;
            border-collapse: collapse;
            padding: 7px 40px;
        }
    </style>
</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <div id="app">
        <h1>Tushar's Movie Database</h1>
        <button v-on:click="createDB">Create Database</button>
        <br><br>

        <div>
            <button v-on:click="queryDB">Query Database</button>
            Movie <input v-model="query.movieName" placeholder=" enter movie">
            Year <input v-model="query.releaseYear" placeholder=" enter release year">
            <br><br>
            <table v-if="queryResult">
                <tr>
                    <td><b>Movie Name</b></td>
                    <td><b>Release Year</b></td>
                    <td><b>Rank</b></td>
                </tr>
                <tr v-for="i in queryResult.length">
                    <td>{{queryResult[i].title}}</td>
                    <td>{{queryResult[i].year}}</td>
                    <td>{{queryResult[i].info.rank}}</td>
                </tr>

            </table>
        </div>
        <button v-on:click="deleteDB">Delete Database</button>
        <br><br>
    </div>

    <script>
        const baseURL = "http://localhost:3000";
        let app = new Vue({
            el: '#app',
            data: {
                queryResult: null,
                query: {
                    releaseYear: 1998,
                    movieName: "The",
                }
            },
            methods: {
                createDB: function () {
                    console.log("creating database...");
                    fetch(`${baseURL}/createDB`).then(response => {
                        if (response.status !== 200) {
                            console.log("Error while creating Database, " + response.status);
                        } else {
                            console.log("Database created successfully!");
                            alert("Database created!");
                        }
                    }).catch(err => {
                        console.log(err);
                    })
                },
                queryDB: function () {
                    console.log("querying database...");
                    fetch(`${baseURL}/queryDB/${this.query.movieName}/${this.query.releaseYear}`).then(response => {
                        if (response.status !== 200) {
                            console.log("Error while querying the database, " + response.status);
                            return;
                        }
                        console.log("Query completed");

                        response.json().then(data => {
                            this.queryResult = data;
                            console.log(data);
                        });
                    })
                },
                deleteDB: function () {
                    console.log("deleting database...");
                    fetch(`${baseURL}/deleteDB`).then(function (response) {
                        if (response.status !== 200) {
                            console.log("Error while deleting database, " + response.status);
                        } else {
                            console.log("Database deleted successfully!");
                            alert("Database deleted!");
                        }
                    }).catch(err => {
                        console.log(err);
                    })
                }
            }
        });
    </script>
</body>
</html>

Вот ошибка, которую я продолжаю получать: 

[Vue warn]: Error in render: "TypeError: Cannot read property 'title' of undefined"

TypeError: Cannot read property 'title' of undefined
    at eval (eval at createFunction (vue.js:11628), <anonymous>:1:1095)
    at Proxy.renderList (vue.js:2642)
    at Proxy.eval (eval at createFunction (vue.js:11628), <anonymous>:1:1013)
    at Vue._render (vue.js:3545)
    at Vue.updateComponent (vue.js:4061)
    at Watcher.get (vue.js:4472)
    at Watcher.run (vue.js:4547)
    at flushSchedulerQueue (vue.js:4305)
    at Array.<anonymous> (vue.js:1989)
    at flushCallbacks (vue.js:1915)

1 Ответ

1 голос
/ 10 ноября 2019

Исправьте петлю v-for: 

<tr v-for="result in queryResult">
  <td>{{result.title}}</td>
</tr>
...