Posted By: Anonymous I want to add transition when the values get changes but cannot accomplish it. I need to change the background when the values get updated. Can anyone help me out? Codesandbox Link – Vuejs Transition <template> <div id="app"> <div class="box"> <div v-if="change > 0"> <transition name="increase"> <span>+ {{ amount }} </span></transition > …
Posted By: Anonymous I am trying to render nested lists with vue components. My approch so far is to create two compontens: One component to render the ‘Blog’ posts and one component to render the comments. The ‘Blogs’ are rendering just fine, but the whole ‘comments’ are missing. I get no errors other than a …
Posted By: Anonymous I’m facing this trouble with popup. When I select "get audio from desktop" and click "Start Recording" , another popup of browser appears , asking me for another decision ( It is about selecting the screen and sharing audio .I realize if I select "Sharing Audio" and click the blue button "share" …
Posted By: Anonymous I just noticed an unexpected behaviour and now I don’t know if it is normal or not. I have a component named follows and a child component named follow-list-modal I’m passing a followList (pagination ) from follows to its child component follow-list-modal In the follow-list-modal I store the paginated array in the …
Posted By: Anonymous I’m showing a div on click from a child component. The component is rendered multiple times on the page outside any kind of loop. When I show the div in this specific instance of the component I want to hide it in all others. I’ve tried using a ref to close all …
Posted By: Anonymous Im trying to pass an id with the v-model so i can pass that to my computed function. The purpose of my function is to dynamically filter a table without hardcoding the names in the function. The function has to be able to filter both select boxes. my data is called guides, …
Posted By: Anonymous I’m working through the vue bootcamp from Scrimba right now and I can’t seem to get the event bus working for communicating between components. I get this error when going to my page Uncaught TypeError: "exports" is read-only Following along exactly like the video, even copying and pasting their code gives me …
Posted By: Anonymous I am trying to add a button to every column of my table by using a Vuejs template and I get the Actions column but the button does not appear. I think I am missing something <template> <div id="menu"> <br> <b-table :items="items" :fields="fields"> <template slot="actions" slot-scope="props"> <span> <b-btn>Edit</b-btn> </span> </template> </b-table> </div> …
Posted By: Anonymous I’m using Vue 3 with <script setup> and I’m getting an error when I’m trying to use a component. In Vue 2, it worked like this: <template> <Tree /> </template> <script> import { Tree, Fold, Draggable } from ‘he-tree-vue’ export default { components: { Tree: Tree.mixPlugins([ Fold, Draggable ]) }, } </script> …
Posted By: Anonymous I want to call the child component methods in parent file and the child component is created by render function. below is my code child.ts export default { setup(props) { //… const getCropper = () => { return cropper } return () => // render function h(‘div’, { style: props.containerStyle }, [ …
Posted By: Anonymous So I am making this API to work with my Vue front end, at first everything worked just fine but I don’t what happened suddenly the front end can’t display the retrieved data properly, I’m using the data on select and it just shows empty options. And when I checked the returned …
Posted By: Anonymous The below code is what I’d like to do but it currently doesn’t work. I’m trying to start building Vue components inside my Polymer app as a way to slowly migrate off Polymer. I’ve been able to get a Vue component working inside my Polymer app, but I’m stuck on how to …
Posted By: Anonymous From the bootstrap-vue documentation i can see how to enable sorting per column but is it possible to do it for the entire table? Solution It’s not possible but you could use a computed property to deal with that easily by mapping fields property and adding sortable key with true value like …
Posted By: Anonymous I am trying to pass an array object to a component, but am not getting anything create.vue <el-row > <component1 v-for=”product in products” :value=”product” :key=”product.id”></component1> </el-row> //script section data() { return { products: [] //there have (id = 1, name = first), (id = 2, name = second) } } component1.vue <el-row> …
Posted By: Anonymous i was using the vue-date-picker for date picker functionality at an input fields because it matched 100% to my requirements. Problem is it working but on loading the page i am passing a default value from the database. but it is not showing me the value until i delete the v-model attribute. …
Posted By: Anonymous I am using Vue plugins so that user can access a global component once registering the global component and configuring it inside Vue.use. For this I need to pass some data from Vue.use() to Component.vue. Take a look at the following code: Vue.use(MyPlugin, { data: true }); the code of MyPlugin is …
Posted By: Anonymous I have a component which triggers this.$root.$emit(‘some-root-event’) like clickHandler: function() { this.$root.$emit("some-root-event", "aaaaaaaaaaaaaaaaaaaaaa"); console.log(‘About $root.$emit’) } Another component inside should catch this event but throws me an error: this.$root.$on is not a function The code of the second component looks like mounted() { this.$root.$on("some-root-event", (data) => { console.log("About listener catch $root some-root-event"); …
Posted By: Anonymous I have namespaced one of my Vuex modules and I am unsure what syntax I should use for this scenario. I am currently using this syntax where dealfilters is my namespaced module. …mapGetters(‘dealfilters’, [ ‘dealCount’, ‘pending’, ‘arrival’, ‘nights’, ‘tag’, ‘sortOptions’ ]) How would I go about adding a global getter for this …
Posted By: Anonymous I want a carousel to be autoplaying untile the user clicked on a dropdown where the carousel go to that option slide, and the autoplay should stop. The only thing i can’t make work is stoping the autoplay, i have vue devtools installed and it show in the carousel component that when …
Posted By: Anonymous I am using vuejs and I would like to switch my class depending on the data value. If its a negative number, i would like to use the .neg class and when its a positive number, i would like to use the .pos class. Everything is working, except for adding the class. …
Posted By: Anonymous How can I be able to call filter of parent using single file component. Below are my code. app.js import computed from ‘../vue/mixins/computed.js’; import filters from ‘../vue/mixins/filters.js’; import methods from ‘../vue/mixins/methods.js’; const app = new Vue({ el: ‘#app’, mixins:[ computed, filters, methods ], mounted: function() { } }); home.vue <template> <div class=”home-content”> …
Posted By: Anonymous I’ve got a v-for list which contains a component. Inside the component I display either a <div> or a <input> depending on the value of a property. The problem is that when I change the property value, all of the items in the v-for are updated and not just the component that …
Posted By: Anonymous I have created the code using bootstrap and VUE js. When I click the button the popup window not showing. I have used VUE js components. I want my output to look like https://prnt.sc/pkhrff but now I am clicking the button nothing happened. My code is here to review! HTML: <div class=”register-wrap” …
Posted By: Anonymous I have an array of generic child components in my parent component: <component v-for=”item in items” :key=”item.id” :is=”componentName”> I can get a child via this.$refs, but I can’t set a new value for a prop :is like: this.$refs[id][0].is = ‘MyNewComponentName’ How can I set a value of component instance property in a …
Posted By: Anonymous My vue component like this : <template> <ul class=”nav nav-tabs nav-tabs-bg”> <li role=”presentation”> <a :href=”baseUrl+’/search/store/’+param”> Store </a> </li> </ul> </template> <script> export default { props: [‘type’, ‘param’], } </script> I want to add condition in href If type = ‘a’ then href = <a :href=”baseUrl+’/search/store/’+param”>Store</a> If type = ‘b’ then href = …
Posted By: Anonymous I am new to Vue. I am using Vue-router and I have some animations and videos on my index page. I would like to prevent the index page from refreshing if I navigate away to the about page for example, so that the user, when they click back to the index page …
Posted By: Anonymous So I’m building an application using Laravel Spark, and therefore taking the opportunity to learn some Vue.js while I’m at it. It’s taken longer for me to get my head around it than I would have liked but I have nearly got Vue-multiselect working for a group of options, the selected options …
Posted By: Anonymous i have a row with 3 components(in which is a defined component 1, component 2 and component 3, as showed in my previous question: VueJs component undefined ) how can i add a row or remove a row (in which has 3 components) using v-for? var data1={selected: null, items:[“A”, “B”]}; Vue.component(‘comp1’, { …
Posted By: Anonymous Codepen with example. I have a SVG map with various paths that hold data. What I’d like to do is pick up the state name when the path is hovered over. I attached a event listener to the svg element and am looking for the event.target to get specific path from the …
Posted By: Anonymous I’m Vue.js newbie and my task is: make an ajax call (GET) to server, using RESTful API (Laravel on background) retrieve a (JSON) list of Form CRUD items in array (like checkbox, input text, textarea…) with their properties (value, checked, custom classes…) render CRUD form with these form items maybe using Vue’s …
