[Vue warn]：属性或方法“列表”未在实例上定义，但在渲染期间被引用。确保此属性是反应性的[…]

Question

我正在浏览瑞克的角色

但我得到下面提到的错误，请帮我解决这个问题

错误1：[Vue警告]：属性或方法“列表”未在实例上定义，但在呈现期间引用。通过初始化属性，确保此属性在数据选项或基于类的组件中是反应性的。

// App.vue file //

<template>
  <div id="app">
    <Nav />
    <CharactersList />
  </div>
</template>

<script>
import Nav from './components/Nav.vue'
import CharactersList from './components/CharactersList'
export default {
  name: 'App',
  components: {
    Nav,
    CharactersList
  }
}
</script>

// CharactersList.vue file //

<template>
    <div>
        <h1>Rick and Morty characters</h1>
        <table border="1px">
            <tr>
                <td>Character ID</td>
                <td>Name</td>
                <td>Species</td>
                <td>Add to fav</td>
            </tr>
            <tr v-for="item in list" v-bind:key="item.id">
                <td>{{item.id}}</td>
                <td>{{item.name}}}}</td>
                <td>{{item.species}}</td>
                <button>Add to fav</button>
            </tr>
        </table>
    </div>
</template>
<script>
import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)
export default {
  name: 'CharactersList',
  data: function () {
    return {
      list: undefined
    }
  },
  mounted () {
    Vue.axios.get('https://rickandmortyapi.com/api/character/')
      .then((resp) => {
        debugger
        this.list = resp.data.results
      })
  }
}
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

Answer 1

首先，您不需要在那里导入Vue和VueAxios，因为它们在那里没有用处。其次，您需要将列表变量值从undefined修改为[]

我已经改变了你的特性列表组件代码，你可以复制和粘贴所有代码，它会按照你想要的方式工作：

< code>CharactersList.vue

<template>
    <div>
        <h1>Rick and Morty characters</h1>
        <table border="1px">
            <tr>
                <td>Character ID</td>
                <td>Name</td>
                <td>Species</td>
                <td>Add to fav</td>
            </tr>
            <tr v-for="item in list" v-bind:key="item.id">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.species}}</td>
                <button>Add to fav</button>
            </tr>
        </table>
    </div>
</template>
<script>
import axios from 'axios'
export default {
  name: 'CharactersList',
  data: function () {
    return {
      list: []
    }
  },
  mounted () {
    axios.get('https://rickandmortyapi.com/api/character/')
      .then((resp) => {
        this.list = resp.data.results
      })
  }
}
</script>