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 just jump up and take its
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 was hoping there was already
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 explains html attributes, perhaps this is something that needs to be done in JS, i guess.
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 explained in the docs
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 with v-for. I am not sure, I may be wrong, let me know
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 component into a
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. Console logs an
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 working. What i am doing wrong? Here is my
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 problem is that I can’t find the
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/mjy8jr4148 Answer Solved it by using using a transition hook, specifically after-enter https://v2.vuejs.org/v2/guide/transitions.html#JavaScript-Hooks