I’m looking at Vue.js as an alternative to Angular and I really like it so far. To get a feeling for it, I’m refactoring an existing Angular project to a Vue project. I’m just at the point where I need to communicate with my REST API. In Angular I used to define a service for that, that was injected into
Tag: vue.js
In Vue.js can a component detect when the slot content changes
We have a component in Vue which is a frame, scaled to the window size, which contains (in a <slot>) an element (typically <img> or <canvas>) which it scales to fit the frame and enables pan and zoom on that element. The component needs to react when the element changes. The only way we can see to do it is
Disable input conditionally (Vue.js)
I have an input: and in my Vue.js component, I have: validated being a boolean, it can be either 0 or 1, but no matter what value is stored in the database, my input is always disabled. I need the input to be disabled if false, otherwise it should be enabled and editable. Update: Doing this always enables the input
In Vue, can I transfer props?
Imagine I have a <progress-bar> UI component and I want to create an <app-progress-bar> component that is the same as the <progress-bar> but with some style tweaks. AppProgressBar.vue: <template> <progress-bar class=”app-progress-bar”></progress-bar> </template> This will break because <progress-bar> requires a percent prop. So I can pass it in: <progress-bar class=”app-progress-bar” percent=”percent”></progress-bar> This seems fine, but is brittle when <progress-bar> has many
Detect click outside element
How can I detect a click outside my element? I’m using Vue.js so it’s gonna be outside my templates element. I know how to do it in Vanilla JS, but I’m not sure if there’s a more proper way to do it, when I’m using Vue.js? This is the solution for Vanilla JS: Javascript Detect Click event outside of div
forEach is not a function error with JavaScript array
I’m trying to make a simple loop: But I get the following error: VM384:53 Uncaught TypeError: parent.children.forEach is not a function Even though parent.children logs: What could be the problem? Note: Here’s a JSFiddle. Answer First option: invoke forEach indirectly The parent.children is an Array like object. Use the following solution: The parent.children is NodeList type, which is an Array
VueJs how to make pagination with limiter and range..?
I have code like this : Im stuck trying to create a pager with vuejs, so I was wonder if anyone can appoint an example of how to make a pager like this if is possible “1-2-3-4-5 … 55” ??, thanks again for any help. Answer Check out this code: https://jsfiddle.net/os7hp1cy/48/ html: css: Basically, it only shows pagination that is
Giving a value to a href in a anchor tag with Vue
Sounds dumb but I can’t find a way to pass a variable data defined in the href: ComponentFile.vue I tried all of those: What is the correct way? Thanks! Answer You’ve defined data() as a function, but it isn’t returning anything. It should return an object with the data like so: Then either of these will work: EDIT FOR VUE
DOM element to corresponding vue.js component
How can I find the vue.js component corresponding to a DOM element? If I have Is there a vue method equivalent to the jQuery Answer The proper way to do with would be to use the v-el directive to give it a reference. Then you can do this.$$[reference]. Update for vue 2 In Vue 2 refs are used for both