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

Durandal attempts to retrieve a view located within the viewmodel directory

Create an Interactive Data Visualization with JSON using CanvasJS Charts

The some() method in Javascript with an extra argument

Using Unicode JSON in Laravel blade to pass data to React components, encountering an issue with JSON parsing

Eliminating unnecessary CSS from the codebase of a website

The Minimax algorithm experiencing issues in Next.js

Is it possible to update labels on an AngularJS slider using a timeout function?

What is the process of performing numerical calculations using jQuery?

Having trouble getting the video to load on your Mozilla Firefox browser?

Oops! RangeError [MESSAGE_CONTENT_TYPE]: The content of the message must be a string that contains at least one character

How can I retrieve the Sequelize results in the form of a 2D array rather than an array of objects?

Persisted state in Vuex using createPersistedState is experiencing some issues with partial persistence

The Controller received a JSON object that was empty

Problem encountered while revalidating Next.js and Sanity documents through a webhook

The form response values consistently show as undefined, attempting to send them to the backend with no success so far after trying two different approaches

Challenges related to using the require() method in JavaScript

The change handler of the TS RadioGroup component, instead of returning an array of possible strings, returns a unique

What steps can be taken to ensure that an ObjectID does not transition into a primitive form

Leverage D3 force simulation as a functional programming tool

Switching left navigation in material-ui when the user interacts within the application boundary