i have a vertical list of items, each of which can be removed. I put my items inside a transition-group and created simple opacity and transform transitions for them. The transitions on the removed elements work as expected, however if I remove an element which is not placed at the bottom, the ones beneath ju…
Tag: vue.js
How to tell if a Vue component is active or not
I have a Vue component that is wrapped in a <keep-alive> tag to prevent re-rendering. Within the component, I want to react to some change in global data by firing a method. But, I only want to fire the method if the component is currently active. Right now, I’m doing something like this: But I wa…
Detecting keyboard button and play sound in vue.js
The code below actually plays sounds on each button click with vue.js. How is it possible to detect keyboard press and play sound when DOM is ready and not when the buttons are clicked? for example on enter play sound v-on:keyup.13=”playSound(‘path/to/mp3’)” Vue documentation mostly ex…
How to emit an event from Vue.js Functional component?
As the title of the question, this context is not available in the functional component. So if I have to emit an event, how can I do that? For example in below code snippet: My functional component doesn’t have this context and hence $emit is not available. How can I bubble-up this event? Answer This is…
how to resolve – Duplicate presence of slot “default” found in the same render tree
I am getting the below error when using <slot> multiple times: Duplicate presence of slot “default” found in the same render tree – this will likely cause render errors. There are solutions that use “scoped slots” but what I understand is that it’s good to use those w…
Cloning a single file Vue component (template and functionality)
I currently have a Vue component that I use in one part of my application. I want to use this same component in another part of my application; however, I would like to make some minor changes to the CSS (change background colors etc.). The easy but repetitive method would be to simply copy and paste the comp…
VueJS & Firestore – Uncaught (in promise) TypeError: Cannot read property of undefined
I am creating a simple app mockup in VueJS, using Google Cloud Firestore as a backend. I have a template up and running, and have the app successfully talking to the Firestore. Below is the working component of one of my Vue components, which grabs some data from Firestore and logs to console: So far so good.…
Cannot remove element from array of components (slice, Vue.js)
I’am trying to implements dynamic adding and removing components in Vue.js. There is a problem with slice method, basically it should remove element from array by passed index. To mutate an array i use slice(i,1) . According to this answer, modifying array in this way should help me, but is’s not …
Using Vue.set in object with multiple nested objects
I am trying to use Vue.set() to update a state object in Vue 2. This is what the object looks like: So far, I was updating it with this mutation. I’m mutating each entry separately because they have different content. Now, I’m trying to implement Vue.set() to avoid a change detection caveat. My pr…
vue transition mode=”out-in” returns a ref element as undefined
So this is an issue when mode=”out-in” is applied as in <transition mode=”out-in”> a ref’d element returned undefined during the updated lifecycle. However, without the mode=”out-in” it works as expected. How can I resolve this? https://codesandbox.io/s/mjy8jr41…