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

【问题标题】：Error says queryResult is undefined even though queryResult contains data错误说 queryResult 未定义，即使 queryResult 包含数据
【发布时间】：2019-11-10 03:04:02
【问题描述】：

我从后端获取一些数据并将其存储到变量queryResult 中。但是每当我按下网页上的查询按钮时，代码都会返回错误提示错误：

TypeError: 无法读取未定义的属性“标题”

控制台将其注销进一步表明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)

【问题讨论】：

更改为v-for="i in queryResult"。在您当前的代码中，您正在循环通过 length 这是不正确的。
这什么也没做。虽然如果我只是尝试显示queryResult[0].title，它会显示列表中第一个对象的标题。
因为你用错了。你应该渲染i.title
使用"i in queryResult"，然后以i.title、i.year等方式访问它们。
当您使用v-for="i in queryResult.length" 时，i 的值将从1 计数到queryResult.length。如果你想访问queryResult 的项目，你需要减去1，所以queryResult[i - 1].title。正如其他人所指出的，最好直接循环遍历数组项而不是计算长度。

标签： javascript node.js vue.js frontend web-frontend

【解决方案1】：

修复您的 v-for 循环：

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

【讨论】：