I have a question about Vue and whether it is possible to achieve the opposite of using props. Let me clarify further with an example. Consider the following:
const app = Vue.createApp({
data: function() {
return {
text: "Hello"
}
},
template: `<div>
<child-input v-model:text="text"></child-input>
<input v-model="text" />
{{text}}
</div>`
})
In this scenario, if I set a prop in the child-input component with the name "text", its value will be synced with the external one. It would look like this:
const childInput = {
data() {
return { input: '' }
},
props : ['text'],
template: '<input type="text" v-model="outsideInput">',
created() {
this.input = this.text
}
}
Now, if I create a watcher for the "text" variable to update the input value, it works. However, what I want to achieve now is the opposite - when the input in childInput (named "input") changes, I want this change to reflect on the external input as well.