[Vue warn]: Property or method "list" is not defined on the instance but referenced during

Posted 2023-02-23

【中文标题】[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>

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

【问题讨论】：

如果你把list: undefined改成list: []呢？

@weronika 解决了吗？

谢谢，yaaas ????– 终于可以正常工作了！

【参考方案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>