错误说 queryResult 未定义，即使 queryResult 包含数据

Question

我正在从后端获取一些数据并将其存储到变量 queryResult。但是每当我在我的网页上按下查询按钮时，代码 returns 就会出现错误，提示 Error in render:

TypeError: Cannot read property 'title' of undefined

控制台注销进一步显示 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)

Answer 1

修复你的 v-for 循环：

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

错误说 queryResult 未定义，即使 queryResult 包含数据

Error says queryResult is undefined even though queryResult contains data

javascript

frontend

web-frontend

node.js

vue.js