我正在获取字典列表。
<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>
结果:result
但是当我尝试调用 film.title
<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>
我有一个错误。error