Reactivity in Vue not responding when listening from a different object

Question

Reactivity in Vue not responding when listening from a different object

Can someone help me understand why my Vue object is not reactive to changes in another object? See the code snippet below.

exampleObject = {
    exampleProperty: null
}

exampleObject.update = function () {
    this.exampleProperty = 'updated data'
}

exampleVue = new Vue({ data: exampleObject.exampleProperty })
                   
console.log(exampleVue.data) // Outputs: null

exampleObject.update()

console.log(exampleVue.data) // Still outputs: null... Shouldn't it be displaying 'updated data'?

I'd appreciate any insights on where I might have gone wrong with this implementation. Thanks!

javascript vue.js

Answer 1

Answer №1

If you're looking to create a reactive object in Vue, you have a couple of options. In Vue 2, you can use observable, while in Vue 3, you can utilize reactive. This allows you to create objects that react to changes automatically. For instance, the code snippet below showcases how to create a data store with a reactive state object:

import { observable } from 'vue'

const test_vue = {
  state: observable({
    test: null
  }),
  setTest() {
    this.state.test = 'data'
  }
}

test_vue.setTest() // => state.test === 'data'

Check out this demo for Vue 2 or this demo for Vue 3 to see it in action.

Answer 2

If you're looking to create a reactive object in Vue, you have a couple of options. In Vue 2, you can use observable, while in Vue 3, you can utilize reactive. This allows you to create objects that react to changes automatically. For instance, the code snippet below showcases how to create a data store with a reactive state object:

import { observable } from 'vue'

const test_vue = {
  state: observable({
    test: null
  }),
  setTest() {
    this.state.test = 'data'
  }
}

test_vue.setTest() // => state.test === 'data'

Check out this demo for Vue 2 or this demo for Vue 3 to see it in action.

Answer 3

Answer №2

Make sure to define the test value as a property and use the set function as a method in Vue.js:

test = {
  test: null
}

test.set = function() {

  this.test = 'data'

}

test_vue = new Vue({
  data() {
    return {
      test: test.test
    }
  },
  methods: {
    set: test.set
  }
})


console.log(test_vue.test)

test_vue.set()

console.log(test_vue.test)

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

Answer 4

Make sure to define the test value as a property and use the set function as a method in Vue.js:

test = {
  test: null
}

test.set = function() {

  this.test = 'data'

}

test_vue = new Vue({
  data() {
    return {
      test: test.test
    }
  },
  methods: {
    set: test.set
  }
})


console.log(test_vue.test)

test_vue.set()

console.log(test_vue.test)

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

Reactivity in Vue not responding when listening from a different object

Answer №1

Answer №2

Similar questions

Ensuring the node array is easily accessible within the view

JavaScript class syntax allows for the definition of inherited instance fields

The act of receiving becomes ineffective when it was intended to be functional - Nextjs/JavaScript

EJS forEach method not displaying output

Angular code is malfunctioning and not delivering the expected results

Navigate back to the previous page without reloading

What is the reason the useEffect hook does not function properly with a state variable within context?

Increase the date and time by a specified number of days

Currently seeking user coordinates for Vue implementation

Component cannot be shown on the screen

What is the process of embedding base64 encoded data into an image in Javascript after retrieving the data from Azure Blob Storage?

Transforming Adobe Animate CC into a customized Vue.js component

Saving similar and dissimilar information in a database

Text located in the bottom right corner of the window with the use of JavaScript

In what way can data be retrieved from within a useEffect block externally?

The production build of Angular 2 with special effects amplification

Using setState in an external function: A step-by-step guide

Exploring JSON data in AngularJS

Implementing a 10-second alert display in selenium

What could be causing this error to appear: Unable to locate the file './components/forms/LoginForm'