Questions tagged [vue-reactivity]
Questions about vue's reactivity, which is all about auto updating arrays and object properties when changed.
vue-reactivity
415
questions
0
votes
1
answer
20
views
Provide / Inject value not getting updated if its reactive value is changed - VueJS
I am quite new to Vue.js coming from a React background. I have a reactive variable config which is passed to provide() function in a component and used by other component using inject(). But the the ...
- 333
0
votes
2
answers
37
views
Pinia state loosing reactivity when used in an object?
Trying to wrap my head around reactivity when it comes to states from a Pinia store.
I have the following store (@/stores/settings.js):
import { defineStore } from 'pinia'
export const useSettings = ...
- 1,546
1
vote
0
answers
40
views
Is the virtual DOM in VueJS redundant?
Can anyone tell me if VueJS has fine-grained reactivity, similar to signals that use a sub-push mechanism to update directly on the actual DOM? If so, does that make the virtual DOM redundant?
I want ...
- 11
1
vote
1
answer
38
views
Can't figure out reactivity in Vue
I'm more familiar with React and I've been try to port this component from React to Vue for a project. Everything about my solution seems to be working except when I update the ref value in the parent ...
0
votes
0
answers
58
views
Vue 3 onMounted not loading data in Vuetify data table server
I have created this page with Vue 3 + Vuetify called demo.vue in my project which receives data from an API server.
The problem that I'm facing is that I set up the data inside an onMounted function, ...
- 1
1
vote
1
answer
28
views
In Vue 3, am I supposed to se the whole object structure when initializing a reactive value?
Suppose I want to create an empty value in my pinia store that hold the current subscription model the user is looking at. This should be null/unset if the user is not currently on a subscription ...
- 1,846
3
votes
1
answer
56
views
Why is a computed property necessary for reactivity in a Vue component with Pinia store?
I am storing an authenticated user of my web app (Vue and Supabase) in a Pinia store: userStore.user. My NavBar component has a login/logout link based on this state. In order to make this reactive ...
- 1,419
0
votes
0
answers
21
views
Why is the reactive variable in my Vue3 component not updating, while it is updating in the composable?
I'm facing an issue with Vue3 and Nuxt3 where a reactive variable currentMatchday within my component isn't updating as expected, despite using a composable to handle its reactivity. Here's the code ...
- 21
1
vote
0
answers
51
views
Problem with reactivity of pinia getters in imported npm package (vue 2.7)
Vue 2.7.14 (options api)
Pinia 2.1.7
I have ChildApp where in "standalone" mode I normally use pinia after initializing it in main.js and everything works.
Below is my store initialization....
- 23
1
vote
2
answers
59
views
Vue computed prop change not being reflected in component if value references same object
example store:
const trigger = ref(true);
const prop = computed(() => {
trigger.value;
console.log('comp prop run'); // works!
return some_big_object;
});
const doChange = () => {
...
- 67.5k
0
votes
0
answers
30
views
Vue ref of parent component does not trigger update of child when changed in another child (Android Chrome)
In my Vue/Vite/Vue Router project, I use a component called DefaultLayout for the basic layout of my page.
It has several slots, like action-left, action-right, title and default:
<!-- layouts/...
- 17
0
votes
1
answer
54
views
Vue3 Loosing reactivity on object, when being passed as prop
I've encountered a strange behavior while migrating from Vue2 to Vue3.
When creating a new object in the parent component with an asynchronous function being called in the constructor, that ...
- 3
0
votes
1
answer
171
views
Vue3: data from Pinia store not arriving
I can't pull Pinia data after page reload using the Composition API.
So, I'm using Vue to digest some fetched JSON. I'm new to the Composition API. But reading the docs I can't see what's missing ...
- 7,645
-1
votes
1
answer
42
views
Vue 3 reactive anti-pattern [closed]
I would like to ask about Vue 3 reactivity system. Im working with Vue 3 for some time. But today, I saw something I have never seen before. Our senior dev wrote something like this
const store = ...
- 13
0
votes
1
answer
86
views
Vue 3 render function no class reactivity
i need to use hyperscript from vue (h function) but i have a problem with conditionnal class.
Here a reproduction link https://codesandbox.io/p/sandbox/quizzical-albattani-hxk5dd?file=%2Fsrc%...
- 124
0
votes
1
answer
40
views
In Vue3's compositional API, how can I v-bind a dynamic group of props to a child component and not lose reactivity?
The context is that I have a Button component and a SquareButton component that wraps it as a higher order component. The SquareButton takes the same props as Button, but includes an extra prop needed ...
- 3,789
0
votes
0
answers
35
views
Vue3 reactivity in props breaks when props are de-referenced?
Since the variable editing loses reactivity to prop changes when the prop is accessed this way, I am wondering how I can fix this so I maintain reactivity to prop changes. I can't use computed ...
1
vote
1
answer
397
views
Managing Reactivity for Complex Nested Objects in Vue3
I'm working on a quite significantly sized web application that heavily interacts with Google Maps using Vue3 with composition API, typescript, and Pinia store.
The application is not complicated in ...
0
votes
1
answer
48
views
<NuxtLayout> name prop not reactive
I have a component that should switch the used layout based on the current breakpoint.
<script setup lang="ts">
import { computed } from "vue";
import { breakpointsTailwind } ...
- 1,846
1
vote
0
answers
48
views
Vue.js3 render() function not letting me render multiple components in the same parent
I'm trying to make a Google Calendar app clone using Vue.js 3
The issue I'm facing is that whenever I try to render a new Event component using Vue.js render() and h() functions inside its parent ...
- 66
0
votes
1
answer
126
views
Vue reactivity and VueUse computedAsync mistery
Would anyone have a hint as to why localData updates properly, while storeData remains stuck at -1 in this Vue SFC playground??
Reactivity issue with computedAsync
The entire code is below; the real ...
- 1
0
votes
1
answer
75
views
Reactivity lost when variable is used in function
I have a simple Vue 3 app with Vite that calls a Google sheets for data. I am missing something about reactivity in Vue 3. The following works fine
<template>
<div v-if="ssData"&...
- 1,237
0
votes
1
answer
1k
views
Vue watchers and reactivity
In my vue app, I want to watch route changes, and then react to the change. Here is an example where I simulate a route change.
<script setup>
import { ref, watch } from 'vue'
import { ...
- 25
0
votes
1
answer
240
views
Pinia stores not reactive in Vue3 components
I am using Pinia for stores in my Vue3 app with Typescript. I want to manage the current week that is being displayed. The problem arises when I try to access the weekDisplay variable from the store. ...
1
vote
0
answers
36
views
Reactivity of a long to calculate prop in Vue.js
I have a Vue component that receives two props: values (an object containing various fields including name) and apiResponse (initially an empty object).
The component includes a name field that should ...
1
vote
1
answer
152
views
Why do I need to specify deep: true in Vue watcher inside Pinia store?
This is my sample:
// App.vue
<script setup lang="ts">
import { onMounted } from 'vue';
import { storeToRefs } from 'pinia';
import { useStore } from './store.js'
const store = ...
- 967
0
votes
0
answers
61
views
About reactive ref([]) I don't understand vue3 composition API
I have make some side project to practice with vue.js.
The issue i encountered is behavior re-render of ref when it data changing.
I have a function to take new user info and update it record in array ...
- 31
2
votes
0
answers
149
views
useSlots() VNode tree is not reactive
I am building a component that manages the layout of its default slot child nodes, for context the general idea is to have something like:
<MyContainer>
<FooComponent />
<...
- 2,671
0
votes
0
answers
23
views
Directives v-if and v-for not rendering expected data in a vuejs3 application
I am making a small application for appointment booking, using vue3 with setup script syntax.
Firstly, I use the @vuepic/vue-datepicker component to display a monthly calendar on the screen and record ...
- 664
1
vote
1
answer
751
views
Vue 3: Remove objects (Proxies) from Array
I have a vue3 project and I use the composition API.
I have a component which shows some items (called tokens in this case).
<script setup>
import { ref, onMounted, toRaw } from 'vue'
import ...
- 4,452
0
votes
1
answer
960
views
How to pass a reactive object with prop values from a component to a composable in vue3 / nuxt3
i have a vue component using the composition API that has some props passed into it.
i would like this component to pass its props into a composable that's a wrapper around useFetch, and i would like ...
- 3,850
0
votes
1
answer
48
views
How to pass reactive vnode to injected function inside component
This is kind of a followup to my previous question. Basically I try to register a vnode with a parent through an injected function. The solution in the question works (it retains reactivity, but a ...
- 597
1
vote
1
answer
42
views
Why template rendering trigger in Vue differs between array item properties and computed array item properties?
Following the suggestion on what's the recommended approach for mutating props when "The prop is passed in as a raw value that needs to be transformed", I tried to "wrap" the ...
0
votes
1
answer
123
views
Vue 3 reactivity differences Provide/Inject vs this.$slots.default
currently I am working on a PR to the primefaces/primevue repository, which will provide the ability to wrap Column components in custom components for the DataTable.
As you can see in the PR (see the ...
- 597
0
votes
2
answers
60
views
How to use Vue 2.0 reactivity using objects?
I have a parent component with certain data:
data: function() {
return {
initialItem: { name: "item", size: 10, description: "some text" }
currentItem:...
- 433
1
vote
1
answer
399
views
Vuetify pagination not updating reactive variable
I'm following this simple example of vuetify external pagination https://vuetifyjs.com/en/components/data-tables/pagination/#external-pagination . Difference is that my code gets the data from an ...
- 97
1
vote
1
answer
1k
views
Pinia + Vue 3 state reactivity - alternative to storeToRefs
I have the following composable useLocations.js:
export const useLocations = defineStore('useLocations', () => {
const state = reactive({
data: 1
})
const update = () => {
...
- 13
0
votes
1
answer
181
views
Dialog box doesn't render while a pinia property was correctly togg
I’m still learning using Vue 3 and Pinia. My program has a main component with a template that shows/hides a modal according to the value of a store boolean property called PlaceModalStore.isShown. In ...
- 117
0
votes
0
answers
220
views
Nested reactivity with ref is diffrent between Vue 2.7 & Vue 3
While trying to migrate from Vue 2.7 to Vue 3 using @vue/compat we had many issue in the reactivity system.
After investigation we could isolate the issue. Here you can find the same code running on ...
- 665
0
votes
0
answers
37
views
vue3 Component and props reactivity
I have this piece of code:
<template>
<div>
<CompA :value="valComputed" @change=onChange/>
</div>
</template>
<script>
import { ref, computed, ...
- 119
1
vote
2
answers
107
views
Template Ref unboxing logic
I'm having trouble creating a reference to an element and storing it inside an (non-reactive) object that I initialize like this:
const myObj = {
myRef: ref(null),
...
}
And in the template I ...
- 59
1
vote
1
answer
2k
views
Why Vue 3 ref is not updating
I have searched this issue and tried all the things but did not work for me. I am using Vue 3 ref and it needs to be updated after calling the Axios with the response but it is not getting updated ...
- 1,183
0
votes
0
answers
52
views
Trigger setter function automatically when value of input changes which is bound to an x-model
I have this in an input field :
x-model="product.price_USD"
x-on:input="$store.global_data.priceInINR = product"
where priceInINR is a setter and this works.
But it the real world ...
- 4,119
0
votes
0
answers
53
views
Vue.js Reactivity is not working properly in a prop
I am using composition API in my Vue.js project. Suppose, I have a ManageFeedback.vue parent component and inside this I am using a child component namely FeedbackModal. Now I am also using a feedback....
- 11
0
votes
1
answer
76
views
How to convert Vue class binding into strings for classlist?
I'm building a component that is going to set classes on the body element, which resides outside of the Vue app. As such, I can't use class bindings on the element, I have to use element.classList.
I ...
- 90.6k
1
vote
1
answer
337
views
How computed in Vue tracks it's dependencies under the hood?
How Vue manages to track dependencies which are used for computed property(under the hood)? In react we have a list of dependencies, but in vue we provide just callback/getter function, how ...
- 39
1
vote
1
answer
716
views
Vue 3 and Window object reactivity
I'm facing an issue I'm not able to solve, so I need some help!
Problem
I would like to listen up changes on location.href value.
How could I detect changes in window.location object?
I need to create ...
- 674
0
votes
3
answers
531
views
How to make every object property reactive?
Consider this simplified example:
interface Dog {
name: string;
age: number;
}
const puppy: Dog = {
name: 'Snoop',
age: 2,
};
I want to create a reactive reference for each property in the ...
- 3,978
0
votes
0
answers
93
views
Reactivity breaks when changing ref's value inside an asychronous callback
Consider the following simple example (vue3 + pinia + fullcalendar):
the store:
export const useFullCalendarStore = defineStore('calendar', () => {
// ...
const activeView = ref<Nullable&...
- 4,223
0
votes
1
answer
181
views
Flattening multiple reactive arrays looses the reactivity (Array.flat())
I have been working on component which takes in a reactive Map<string, string[]> and combines all the values of this Map into single array. This resulting flattened array is put into a reactive ...
- 1,579