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

Question

I'm browsing characters of the Rick & Morty series app, using vue.js and I'm new to vue.js.

but I'm getting below mentioned error, please help me solve this

Error1 : [Vue warn]: Property or method "list" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option or for class-based components, by initializing the property.

// 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

First of all, you don't need to import there Vue and VueAxios, as they are no use there. And second, you need to modify your list variable value from undefined to []

I have changed your CharactersList component code, you can copy and paste all codes, and it will work as the way you want:

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>