Stack Overflow
Stack Overflow

Questions tagged [vue-reactivity]

Questions about vue's reactivity, which is all about auto updating arrays and object properties when changed.

Vue reactivity basically means Vue auto updates properties and array objects when they are modified. Check out the article from vuejs for more information.

374 questions
41
votes
2 answers

What is the difference between ref, toRef and toRefs

I have just started working with Vue 3 and Composition API. I was wondering what are the differences between ref, toRef and toRefs?
Zumm
  • 876
  • 2
  • 8
  • 12
16
votes
2 answers

Is state.array.push reactive in a Vuex mutation?

I'm a bit new to JS and Vue and am not quite sure if I understood the documentation correctly. It says: Due to the limitations of modern JavaScript (and the abandonment of Object.observe), Vue cannot detect property addition or deletion. Since Vue…
fogx
  • 1,749
  • 2
  • 16
  • 38
13
votes
2 answers

Vue 3 - Vue.delete alternative

What's the alternative of Vue.delete in the new Reactivity API of Vue 3?
nitrovatter
  • 931
  • 4
  • 13
  • 30
13
votes
1 answer

How do I push items into an array in the data object in Vuejs? Vue seems not to be watching the .push() method

I am attempting to add objects into an array I declared in Vue instance data object. I can set the values in the state's purchase object, but when I push data into the orders queue array, the empty array is not populated. The function is being…
user4998157
11
votes
2 answers

Readonly target in Vue composition API

My "Generateur" component is sending props to my "Visionneuse" component. Everything works fine inthe browser, but I have this message in the console: Set operation on key "texteEnvoye" failed: target is readonly. I really have no clue why I get…
djcaesar9114
  • 1,880
  • 1
  • 21
  • 41
10
votes
2 answers

Vue 3 reactivity not triggered from inside a class instance

Codepen: https://codepen.io/codingkiwi_/pen/XWMBRpW Lets say you have a class: class MyClass { constructor(){ this.entries = ["a"]; //=== example change triggered from INSIDE the class === setTimeout(() => { …
CodingKiwi
  • 676
  • 8
  • 22
9
votes
1 answer

What's the pros and cons of Vue's reactivity compares to immutable approach like React?

Vue triggers component re-render by it's reactivity mechanism, so developers can mutate states directly. Vue will detect the state change and trigger component rerender. React triggers component re-render by manually setState and React will diff…
洪梓凱
  • 105
  • 7
9
votes
1 answer

"Property or method is not defined on the instance but referenced during render"

I need to display the item.title outside the but I get this error message: [Vue warn]: Property or method "item" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data…
Tom
  • 5,588
  • 20
  • 77
  • 129
7
votes
1 answer

Removing proxying on a Reactive Object in vue 3 composition API

I'm stuck on a reactivity problem. I am using Stein to create a back end in google sheets. Stein is very particular and wants request in [{}] format. I have done the following: Template:
…
Alan
  • 1,067
  • 1
  • 23
  • 37
6
votes
2 answers

Store reactive (ref) value in pinia

I have a reactive value, which I want to store in a pinia store. const data = ref({}); async function loadData() { fetch("...") .then((res) => res.json()) .then((json) => (data.value = json)); } loadData(); const myDataStore =…
Codey
  • 1,131
  • 2
  • 15
  • 34
6
votes
1 answer

Unable to loop through Vue 3 Reactive Array prop (proxy)

The Task I'm working on a marketplace of products. Each product has an ID and a bunch of information associated with each product. There is a concept of packages of the products, which is simply a product that is a bundle of other products. Within…
Jamie Bohanna
  • 530
  • 1
  • 8
  • 26
6
votes
3 answers

Vue 3 How to use watch or watchEffect (and console.log) on a reactive object?

I am trying to (deep) watch for any changes on a reactive object in Vue 3: import { reactive, watchEffect } from 'vue'; const settings = reactive({ panes: { left: { defaultAction: "openInOtherPane", }, right: { …
Hendrik Jan
  • 4,396
  • 8
  • 39
  • 75
6
votes
2 answers

Vue 3 how to watch Map

I’m passing a map to a component and then emit back new values and update the map. This triggers the watch on the map, but the old and new values passed are the same. Is it possible in this case to have a watch that receives old values? (function()…
user1481126
5
votes
1 answer

Why my vue components don't update when the state in pinia changes?

I'm working on a website that uses vue and firebase. After the authentication part the user gets to the dashboard where there is the list of his projects that are a subcollection of the user document in firestore. I made a pinia store that manages…
Vincenzo Cascone
  • 53
  • 1
  • 3
5
votes
2 answers

Why is empty object in Vue3 not reactive?

When I create a ref from an empty object and later add object properties, there is no reactivity: