我从后端获取一些数据并将其存储到变量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)
最佳答案
修复您的v-for循环：
<tr v-for="result in queryResult">
<td>{{result.title}}</td>
</tr>