1

I have one single file component that is used to show data and another one that is used to edit the same data. The view has labels and paragraphs where as the edit component has inputs and textareas.

Both of these components take the same data object. Is there a way that by editing the fields (bound with v-model in the edit component) the changes a reflected to the view component?

For example, here's my paragraph.vue that is used to show the data

<template>
    <div class="row">
        <div class="col-xs-12">
            <p>{{ text }}</p>
        </div>
    </div>
</template>

and here's 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>
Mikko
  • 607
  • 2
  • 9
  • 22
  • if they have same parent component then you can use event to signal new paragraph value. – Piotr Pasieka Dec 01 '16 at 12:13
  • 2
    If you want use events then read about Component props https://vuejs.org/v2/guide/components.html#Props and about custom events https://vuejs.org/v2/guide/components.html#Custom-Events in official documentation. I guess that solution presented there is one you are looking for. Of course centralized state management (with vuex) is really good solution too. – Piotr Pasieka Dec 01 '16 at 12:26

1 Answers1

2

If you have multiple components using the same data, you can use a share state as explained in the documentation.

But if the number of components increases, and there are many changes happening, you may need a Centralized State Management like vuex, which is generally preferred in due community.

tony19
  • 125,647
  • 18
  • 229
  • 307
Saurabh
  • 71,488
  • 40
  • 181
  • 244