Version

3.2.20

Reproduction link

codepen.io/manl-t/pen/WNEROyJ

Steps to reproduce

So with {{ thread.title }} I get: Cannot read properties of undefined (reading 'title')

Yet this works fine:

The script:

props: { id: { required: true, type: String } }, mounted() { fetch('http://localhost:3000/threads') .then(res => res.json()) .then(data => this.threads = data) .catch(err => console.log(err)) }, data( ) { return { threads: [] } }, computed: { thread () { return this.threads.find(t => t.id === this.id) } } }

What is expected?

I am building a forum, and passing the thread id dynamically via router-link as a prop. At the same time I am getting all the threads on the mounted hook, and then using a computed property to find the thread that corresponds to the id prop.

What is actually happening?

If on the template I inject the whole thread, it works perfectly. But, if I try to access one single element of it, I get an error saying that it can't get that element from undefined.

Could this be something to do with different timings between receiving the props and the mounted hook in relation to the creation phase and the execution phase? In any case, what is the correct way to get around this?

This is expected behaviour as thread will be undefined directly after mount, until data has been fetched and the component has updated.

Please use chat.vujes.org to ask for help with this, it's one of the most common patterns to use with Vue and remote data.

Yes, I just had to use a v-if. Thank you for your help :-)