I want to establish a bidirectional relationship between a component and its child. For instance, I have a common string that is passed to my sub-components:
<template>
<div>
<foobar title="Foo" :value.sync="shared"></foobar>
<foobar title="Bar" :value.sync="shared"></foobar>
</div>
</template>
<script>
import Sub from './sub'
export default {
components: {
'foobar': Sub
},
watch : {
shared() {
console.log("Shared value was updated")
}
},
data() {
return {
shared: "Content"
}
}
}
</script>
Each subcomponent consists of a text input linked to this shared property:
<template>
<b-form-group :description="title">
<b-form-input v-model="value"></b-form-input>
</b-form-group>
</template>
<script>
export default {
props: {
value: String,
title: String
}
}
</script>
The desired behavior is to always display the same value in both text inputs. If I change `Foo`, `Bar` should update and the watcher event `Shared value was updated` would be triggered.
However, instead of the expected outcome, I encounter the following error:
[Vue warn]: Avoid mutating a prop directly since the value will be overwritten
whenever the parent component re-enters.