Questions tagged [vue-reactivity]

What is the reason for the vue effect not going through the scheduler upon initialization? effect( () => { console.log('effect'); }, { scheduler: (job) => { console.log('run by scheduler'); job(); }, ...

Let's dive into a simplified version of the problem at hand: export default { data () { return { i_change_alot: 0, }; }, mounted() { setInterval(() => { this.i_change_alot = Math.random(); ...

Currently, I am working on a Vue application that is using Vue 2.6.10 along with Typescript 3.6.3. In my project, I have defined a Typescript class which contains some standard functions for the application. There is also a plugin in place that assigns an ...

First and foremost, let me provide some context: I am currently in the process of developing a minesweeper application using VueJS. The grid is structured as an object tree, where each Box object contains a 'neighbors' property that stores Box o ...

When working with a component that retrieves API data and passes it down to child components, I encountered an issue. I attempted to split the information into separate ref objects for each child component but ran into a problem - reactivity was lost. The ...

I am facing an issue with tracking changes in a specific object. Here is the structure of the object: users: { email: '', password: '' } My goal is to detect any edits made to the keys within the users object and store the key ...

Vue.js has a special place in my heart, especially its computed properties and the magic of Vuex getters. However, I've reached a crossroads where I'm unsure if my current approach may be impacting performance. This pattern features prominently in my code ...

This is the parent component called abc.vue <v-card outlined class="mt-4"> <DetailsTable v-show="toggleClientData" :columnDefs="columnDefs" :rowData="rowData" /> </v-card> methods:{ aggridData() { let self = this; th ...

I'm experiencing a reactivity problem in the example below. I can't figure out what I'm doing wrong. Is my vue data set up correctly or is there something else I need to do? Here's how my object model looks: export default { data ...

Can you take a look at this simple example? export default { data() { return { name: "Amy", age: 18, }; }, computed: { combinedDataForWatching() { return { name: this.name, age: this.age, ...

I am looking to implement a mutation in Vuex that dynamically updates the state by specifying a path to the object from which I want to remove an element, along with the key of the element. Triggering the action deleteOption(path, key) { this.$store.d ...

Can someone help me understand why my code is calling someFunction() four times instead of just once? This is the structure: <div id="app"> <div v-for="item in items" :key="item.id"> <input v-model=" ...

I am in the process of utilizing a data access object (dao) named Todos.js to fetch necessary data for a Vue3 component called List.vue. Below, you will find snippets from my code as an example. Upon initializing the application, the data is successfully ...

There is an example discussed in this particular article. It mentions that a normal object is not 'reactive'. Upon testing in this codesandbox environment, it was observed that changes made to the normal object, including a plain string, can automatically ...

My form is designed to fetch questions from an API, and I am looking to collect answers in separate input fields for each question. To achieve this, I have set up a response array with a length greater than or equal to the number of questions, pre-filling ...

Let's dive into this simplified scenario: interface Pup { name: string; age: number; } const puppy: Pup = { name: 'Rex', age: 3, }; The goal here is to establish a reactive link for each attribute within the puppy object. The usua ...

In my possession is this particular component: <template> <div class="simple-editor"> {{editor.view.toolbarManager.buttons}} <component v-for="(button, name) in editor.view.toolbarManager.buttons" ...

Currently utilizing Vue2, Vuetify, and the Vue Composition API (@vue/composition-api). Encountering an issue with the reactivity of the composition API. Let's delve into some code snippets: ---- companies.vue ---- <template> ... <v-data-tabl ...

I have a function in my methods that gets triggered with a @click in the view. The function starts a timer, and although it seems to work fine in the DevTools, the timer only updates in the DevTools when I refresh the page. Moreover, in the view, the time ...