Sharing real-time data components in Vue 2.0 with others

Question

Sharing real-time data components in Vue 2.0 with others

Update: I've recently implemented VUEX to efficiently manage and store all my data.

I'm currently facing an issue with data synchronization between components in a container. Although each component's data is stored within the container, it does not update dynamically. Here is an example of the code structure:

Container "father.vue"

import JobDetails from 'components/searchPosition/jobDetails.vue'
export default {
  components: { JobDetails },
  data () {
    return {
      attributes: {
        jobTitle: JobDetails.data().jobTitle,
        ...more data...
      }
    }

Component "son.vue"

export default {
  components: {},
  data () {
    return {
      jobTitle: 'Test',
      ...more data...
    }
  }

When trying to display the jobTitle in the template, it does not reflect changes live as expected:

<pre>
  {{ attributes.jobTitle }} < This value is an input field; changing it doesn't update the container data
</pre>

Is there a method to achieve real-time data synchronization between components?

javascript vue.js components containers vuejs2

Answer 1

Answer №1

By not adhering to the Single source of truth principle, you are inadvertently causing harm. This principle is elaborately discussed in Bert Evans' provided link.

While it's possible to have real-time data and updates between components, the approach should be different.

Typically, data should be defined in the parent element and passed down to its children. Any changes within the child component should prompt an update request to the parent. It is recommended not to directly update props. Here's a simple example to illustrate this concept.

Parent

...
data: function() {
   return { text: '' }
},

methods: {
   updateText: function(sText) {
      this.text = sText;
   }
}
...

Child

...
data: function() { return { tmp: '' } },
props: ['text'],
created: function() {
  this.tmp = this.text;
},
methods: {
  emitChange: function() {
    this.$emit('update', this.tmp);
  }
}
...

Template for child

<template>
  <div>
    <input @input="emitChange" v-model="tmp" />
  </div>
</template>

Template of parent

<template>
   <div>
      <child :text="text" @update="updateText" />
   </div>
</template>

In short:

The parent holds the actual text data for all components.
Child components have an internal 'tmp' value initially set to 'text' from the parent.
Changes made to 'tmp' will reflect on the initial text in the parent component.
Changes are emitted and the parent listens for these emissions.

Issues with the current example

There is no direct connection between 'tmp' and 'text' in the child component as shown in this example. Other child components' changes could potentially overwrite values. Avoid using this exact code if that behavior isn't desired. Nevertheless, the overall concept should now be clearer.

Answer 2

By not adhering to the Single source of truth principle, you are inadvertently causing harm. This principle is elaborately discussed in Bert Evans' provided link.

While it's possible to have real-time data and updates between components, the approach should be different.

Typically, data should be defined in the parent element and passed down to its children. Any changes within the child component should prompt an update request to the parent. It is recommended not to directly update props. Here's a simple example to illustrate this concept.

Parent

...
data: function() {
   return { text: '' }
},

methods: {
   updateText: function(sText) {
      this.text = sText;
   }
}
...

Child

...
data: function() { return { tmp: '' } },
props: ['text'],
created: function() {
  this.tmp = this.text;
},
methods: {
  emitChange: function() {
    this.$emit('update', this.tmp);
  }
}
...

Template for child

<template>
  <div>
    <input @input="emitChange" v-model="tmp" />
  </div>
</template>

Template of parent

<template>
   <div>
      <child :text="text" @update="updateText" />
   </div>
</template>

In short:

The parent holds the actual text data for all components.
Child components have an internal 'tmp' value initially set to 'text' from the parent.
Changes made to 'tmp' will reflect on the initial text in the parent component.
Changes are emitted and the parent listens for these emissions.

Issues with the current example

There is no direct connection between 'tmp' and 'text' in the child component as shown in this example. Other child components' changes could potentially overwrite values. Avoid using this exact code if that behavior isn't desired. Nevertheless, the overall concept should now be clearer.

Sharing real-time data components in Vue 2.0 with others

Answer №1

Similar questions

Fade in and out on button press

Tips for handling Vue/Axios JSON payload sent data in Yii2

Ways to make a jsonp request without including the 'callback' in the URL

What are the steps for utilizing the skrollr library to manipulate text within a div without it being

Customizing the appearance and dimensions of JWPlayer Audio Player with percentage-based styling

Retrieve specific JSON information

Combining React with the power of Express

Excessive content spills off the page (React)

Eliminate spaces within a string using JavaScript

Utilize MaxMind GeoIP2 to identify the city accurately

"An issue with ng-controller in AngularJS causing a simple error

Iterating through an array of objects and performing reduction based on various key-value pairs

Regular expressions can be used to remove specific parts of a URL that come before the domain name

KineticJS: Applying a filter to an image does not result in the image having a stroke

Node Js seems to be taking quite a while to output to the console

Selecting DigitalOcean city based on user location in Node.js

Tips for displaying HTML elements using JSON data in React?

Techniques for displaying images in JavaScript through iteration

What is the best way to organize large amounts of data into an array?

update certain parts of a webpage using ajax and still allow users to