I have reused the same component in both the navigation menu and on the people's page.
My problem is that when the SearchComponent inputs in the navigation update their values, the SearchComponent inputs on the people's page do not update, and vice versa. How can I achieve this in Vue JS? Below are my code snippets:
SearchComponent
<template>
<div class="search">
<input type="text" v-model="name">
<input type="text" v-model="email">
<input type="text" v-model="age">
</div>
</template>
<script>
export default {
name: 'SearchComponent',
data() {
return {
name: '',
email: '',
age: ''
}
}
}
</script>
Navigation
<template>
<div class="nav">
<ul>
<li>Home</li>
<li>Contact</li>
<li>About</li>
</ul>
<SearchComponent />
</div>
</template>
<script>
import SearchComponent from './SearchComponent'
export default {
name: 'NavComponent',
data() {
return {
name: '',
email: '',
age: ''
}
},
components: {SearchComponent}
}
</script>
People's Page
<template>
<div class="persons">
<SearchComponent />
<PersonList />
</div>
</template>
<script>
import SearchComponent from './SearchComponent'
import PersonList from './PersonList'
export default {
name: 'PersonsPage',
data() {
return {
name: '',
email: '',
age: ''
}
},
components: {SearchComponent, PersonList}
}
</script>