Utilizing the v-for directive to loop through a computed property, which is dependent on a data attribute initialized as null. I'm planning to load it during the beforeMount lifecycle hook.
Here's a simplified version of the code:
<th v-for="item in computed_list">
{{ item.name }}
</th>
<script>
export default {
name: 'test',
data () {
return {
whole_list: null
}
},
beforeMount () {
this.load()
},
computed: {
computed_list: function() {
if (!this.series) return []
return this.whole_list.slice(1,3)
}
},
methods: {
async load () {
let res = await some_api_call()
this.whole_list = res['data']
}
}
}
</script>
However, rendering the list failed and throws a
TypeError: Cannot read property 'name' of nullBeing new to Vue.js, I am still learning about its lifecycle. The main goal here is to display a list of data that will be loaded after creating the Vue instance. Unsure if the current approach is correct.