“类型错误：无法读取未定义的属性‘标题’”

Question

我正在获取字典列表。

<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