I have two separate components - one for viewing data and another for editing the same data. The viewing component contains labels and paragraphs, while the editing component includes inputs and textareas.
Both components are fed the same data object. Is there a way to ensure that changes made to the fields in the edit component (bound with v-model) are automatically reflected in the view component?
For instance, here is a snippet from my paragraph.vue used for displaying data:
<template>
<div class="row">
<div class="col-xs-12">
<p>{{ text }}</p>
</div>
</div>
</template>
and here is the edit dialog:
<template>
<div class="form-group">
<label for="paragaph-text">Paragraph</label>
<textarea id="paragaph-text" class="form-control" v-model.trim="text"></textarea>
</div>
</template>