There is a component with a shared v-model, identical to the parent component. Here is the code snippet:
Vue.component('greeting', {
template: '<input type="text" :name="name" v-on:input="updateSearch($event.target.value)"> ' ,
props: ['name'],
methods: {
updateSearch: function(value) {
this.$emit('input', value);
}
}
});
const app = new Vue({
el: '#app',
data: {
name: ''
}
});<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4234372702706c746c7b">[email protected]</a>/dist/vue.js"></script>
<div id="app">
Child: <greeting v-model="name"></greeting>
<br><br><br>
Main: <input type="text" v-model="name" placeholder="" />
</div>If a user inputs text in either input box, I need both of them to be updated. Any suggestions on how to achieve this would be appreciated.