Vue.js &引用;TypeError:无法读取属性';标题';“未定义”的定义;
我得到一份口述的清单Vue.js &引用;TypeError:无法读取属性';标题';“未定义”的定义;,vue.js,http,v-for,Vue.js,Http,V For,我得到一份口述的清单 <script> import axios from 'axios'; export default { data() { return { films: [], }; }, methods: { getFilms() { const path = 'http://127.0.0.1:5000/api/v1.0/films'; axios.get(path) .then((
<script>
import axios from 'axios';
export default {
data() {
return {
films: [],
};
},
methods: {
getFilms() {
const path = 'http://127.0.0.1:5000/api/v1.0/films';
axios.get(path)
.then((res) => {
this.films = res.data.films;
})
.catch((error) => {
console.error(error);
});
},
},
created() {
this.getFilms();
},
};
</script>
我有一个错误。你能把
v-for=“{film,index}
改成v-for=(film,index)
然后试试:)@halilcakar谢谢你,行得通。
<template>
<div class="container">
<div class="row">
<div class="col-sm-10">
<h1>Films</h1>
<hr><br><br>
<button type="button" class="btn btn-success btn-sm">Add Film</button>
<br>{{ films }}<br>
<table class="table table-hover">
<thead>
<tr>
<th scope="col">Id</th>
<th scope="col">Title</th>
<th scope="col">Genre</th>
<th scope="col">Short review</th>
<th></th>
</tr>
</thead>
<tbody>
<tr v-for="{film, index} in films" :key="index">
<td>{{ film.title }}</td>
<td></td>
<td></td>
<td></td>
<td>
<button type="button" class="btn btn-warning btn-sm">Update</button>
<button type="button" class="btn btn-danger btn-sm">Delete</button>
</td>
<td>films</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</template>