I'm just starting out with VUE and I have a unique challenge for my project. I want to have a button on one page that triggers a function on another page. I know some may ask why not keep the button and function on the same page, but I am exploring how to call functions from different pages as part of learning. I hope to make it clearer by asking this question.
Whenever I try to call the method function from chairPage.vue in homePage.vue, I get an error saying world is not defined in homePage.vue. Can someone please help me understand why this error occurs and suggest the best way to resolve it?
I have two Vue components: homePage.vue and chair.Vue. The goal is to have a button on homePage.vue trigger the method function on chairPage.vue.
Home Page
<template>
<div id="homepage">
<b-button variant="info" @click="buttonClicked()">Click</b-button>
<chairComponent ref="world"/>
</div>
</template>
<script>
import chairComponent from '@/components/chair.vue';
export default {
props: [],
methods:{
buttonClicked(){
this.$refs.world.hello();
}
}
}
</script>
Chair Page
<template>
<div id="chairComponent">
<p v-if="displayText == '1'"> HELLO WORLD </p>
</div>
</template>
<script>
export default {
props: ['world'],
data(){
return{
displayText:'',
}
},
methods:{
hello(){
console.log('inside child component hello function');
this.displayText = '1';
}
}
}
</script>