[Vue warn]: Property or method "list" is not defined on the instance but referenced during render. Make sure that this property is reactive [...]答案

【问题标题】：[Vue warn]: Property or method "list" is not defined on the instance but referenced during render. Make sure that this property is reactive [...][Vue warn]: Property or method "list" is not defined on the instance but referenced during render. Make sure that this property is reactive [...]
【发布时间】：2021-06-12 04:32:08
【问题描述】：

我正在使用 vue.js 浏览 Rick & Morty 系列应用的角色，我是 vue.js 的新手。

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

Error1：[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>

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"&gt;&lt;/script&gt;

【问题讨论】：

如果你把list: undefined改成list: []呢？
@weronika 解决了吗？
谢谢，yaaas ????– 终于可以正常工作了！

标签： javascript typescript api vue.js

【解决方案1】：

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

我已经更改了你的CharactersList组件代码，你可以复制粘贴所有代码，它会按照你想要的方式工作：

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>

【讨论】：