I'm currently exploring the characters from the Rick & Morty series app using vue.js, and I am still learning how to use vue.js.
However, I encountered the following error and would appreciate help in resolving it:
Error1: [Vue warn]: Property or method "list" is not defined on the instance but referenced during render. Please ensure 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>