In my Vue.js project, I have created two components. The main component uses a child component called NoteRenderer, which includes a prop named data_exchange. My goal is to update this prop from the main component when a button is clicked. I attempted to achieve this by writing the following code:
<template>
<div>
<h1>Study</h1>
<button @click="update_nra()">Change NodeRenderer text.</button>
</div>
<nra/>
<nrb/>
</template>
<script>
import NoteRenderer from '../components/NoteRenderer.vue'
export default {
components: {
'nra': NoteRenderer,
'nrb': NoteRenderer
},
methods: {
update_nra: function() {
this.nra.exchange_data = "new text";
}
}
}
</script>
However, upon execution, I encounter the runtime error
Uncaught TypeError: this.nra is undefinednra of the NoteRenderer component within the update_nra() method?