Skip to main content

Questions tagged [vue.js]

Vue.js is an open-source, progressive JavaScript framework for building user interfaces that aims to be incrementally adoptable. Vue.js is mainly used for front-end development and requires an intermediate level of HTML and CSS. Vue.js questions are highly version specific and should always be tagged with [vuejs2] or [vuejs3] in addition to this tag.

Filter by
Sorted by
Tagged with
715 votes
16 answers
612k views

Vue.js - How to properly watch for nested data

I'm trying to understand how to properly watch for some prop variation. I have a parent component (.vue files) that receive data from an ajax call, put the data inside an object and use it to render ...
Plastic's user avatar
  • 10.2k
611 votes
51 answers
819k views

Why does Prettier not format code in VS Code?

In my Nuxt application where ESlint and Prettier are installed and enabled, I switched to Visual Studio Code. When I open a .vue file and press CMD+ Shift + P and choose Format Document, my file does ...
Billal Begueradj's user avatar
557 votes
15 answers
624k views

How can I get query parameters from a URL in Vue.js?

How can I fetch query parameters in Vue.js? E.g. http://somesite.com?test=yay Can’t find a way to fetch or do I need to use pure JS or some library for this?
Rob's user avatar
  • 11.2k
503 votes
18 answers
571k views

How to listen for 'props' changes

In the VueJs 2.0 docs I can't find any hooks that would listen on props changes. Does VueJs have such hooks like onPropsUpdated() or similar? Update As @wostex suggested, I tried to watch my property ...
Amio.io's user avatar
  • 21.3k
437 votes
15 answers
621k views

Disable input conditionally (Vue.js)

I have an input: <input type="text" id="name" class="form-control" name="name" v-model="form.name" :disabled="validated ? ''...
Zaffar Saffee's user avatar
436 votes
13 answers
170k views

What does the @ mean inside an import path?

I'm starting a new vue.js project so I used the vue-cli tool to scaffold out a new webpack project (i.e. vue init webpack). As I was walking through the generated files I noticed the following imports ...
Chris Schmitz's user avatar
417 votes
24 answers
721k views

Can you force Vue.js to reload/re-render?

Just a quick question. Can you force Vue.js to reload/recalculate everything? If so, how?
Dave's user avatar
  • 12.4k
375 votes
6 answers
231k views

Difference between v-model and v-bind on Vue.js?

I'm learning Vue with an online course and the instructor gave me an exercise to make an input text with a default value. I completed it using v-model but, the instructor chose v-bind:value, and I don'...
Gustavo Dias's user avatar
  • 3,881
369 votes
16 answers
223k views

Vue.js - How to remove hashbang #! from url?

How to remove hashbang #! from url? I found option to disable hashbang in vue router documentation ( http://vuejs.github.io/vue-router/en/options.html ) but this option removes #! and just put # Is ...
DokiCRO's user avatar
  • 4,675
362 votes
13 answers
403k views

Can I pass parameters in computed properties in Vue.Js

is this possible to pass parameter in computed properties in Vue.Js. I can see when having getters/setter using computed, they can take a parameter and assign it to a variable. like here from ...
Saurabh's user avatar
  • 73.1k
353 votes
17 answers
368k views

TypeError: this.getOptions is not a function

I am facing a weird error when I installed Bootstrap. The error is below. I tried uninstalling less-loader and installing [email protected], because I saw it online, but it did nothing. I am unsure ...
Juliette's user avatar
  • 4,389
341 votes
17 answers
375k views

Call a Vue.js component method from outside the component

Let's say I have a main Vue instance that has child components. Is there a way of calling a method belonging to one of these components from outside the Vue instance entirely? Here is an example: ...
harryg's user avatar
  • 23.9k
337 votes
24 answers
745k views

'Property does not exist on type 'never'

This is similar to #40796374 but that is around types, while I am using interfaces. Given the code below: interface Foo { name: string; } function go() { let instance: Foo | null = null; let ...
Ray Booysen's user avatar
  • 29.6k
313 votes
24 answers
476k views

How to add external JS scripts to VueJS Components?

I've to use two external scripts for the payment gateways. Right now both are put in the index.html file. However, I don't want to load these files at the beginning itself. The payment gateway is ...
Gijo Varghese's user avatar
312 votes
22 answers
429k views

How to watch store values from vuex?

I am using vuex and vuejs 2 together. I am new to vuex, I want to watch a store variable change. I want to add the watch function in my vue component This is what I have so far: import Vue from '...
raffffffff's user avatar
  • 3,487
312 votes
9 answers
268k views

Vue v-on:click does not work on component

I'm trying to use the on click directive inside a component but it does not seem to work. When I click the component nothings happens when I should get a 'test clicked' in the console. I don't see any ...
Javier Cárdenas's user avatar
311 votes
28 answers
366k views

Vue 2 - Mutating props vue-warn

I started https://laracasts.com/series/learning-vue-step-by-step series. I stopped on the lesson Vue, Laravel, and AJAX with this error: vue.js:2574 [Vue warn]: Avoid mutating a prop directly since ...
Dariusz Chowański's user avatar
310 votes
11 answers
293k views

How to call function on child component on parent events

Context In Vue 2.0 the documentation and others clearly indicate that communication from parent to child happens via props. Question How does a parent tell its child an event has happened via props?...
jbodily's user avatar
  • 3,793
307 votes
2 answers
180k views

Difference between the created and mounted events in Vue.js

Vue.js documentation describes the created and mounted events as follows: created Called synchronously after the instance is created. At this stage, the instance has finished processing the ...
lesssugar's user avatar
  • 15.9k
306 votes
34 answers
410k views

error /node_modules/node-sass: Command failed

When I tried install vue store front in my local but when I tried "yarn install" command I get following error. How can I solve this error? How can I solve this error? error /var/www/html/vue-...
Adil's user avatar
  • 3,581
300 votes
13 answers
156k views

Methods vs Computed in Vue

What is the main difference between a method and a computed value in Vue.js? They seem the same and interchangeable to me.
Bootstrap4's user avatar
  • 3,801
295 votes
4 answers
268k views

Passing event and argument to v-on in Vue.js

I pass a parameter in v-on:input directives. If I don't pass it, I can access the event in the method. Is there any way I can still access the event when passing the parameter to the function? Note ...
geckob's user avatar
  • 7,980
287 votes
15 answers
468k views

Vue Js - Loop via v-for X times (in a range)

How can I repeat a loop via v-for X (e.g. 10) times? <!-- want to repeat this (e.g.) 10 times --> <ul> <li v-for="item in shoppingItems"> {{ item.name }} - {{ item....
MikeCaine's user avatar
  • 3,661
285 votes
6 answers
261k views

Display unescaped HTML in Vue.js

How can I manage to get HTML interpreted inside a mustache binding? At the moment the break (<br />) is just displayed/escaped. Small Vue app: var logapp = new Vue({ el: '#logapp', data: { ...
Mike's user avatar
  • 5,688
266 votes
13 answers
81k views

Vuex Action vs Mutations

In Vuex, what is the logic of having both "actions" and "mutations?" I understand the logic of components not being able to modify state (which seems smart), but having both actions and mutations ...
Kobi's user avatar
  • 4,193
265 votes
13 answers
694k views

forEach is not a function error with JavaScript array

I'm trying to make a simple loop: const parent = this.el.parentElement console.log(parent.children) parent.children.forEach(child => { console.log(child) }) But I get the following error: ...
wyc's user avatar
  • 54.6k
259 votes
2 answers
121k views

Is there a way to dispatch actions between two namespaced vuex modules?

Is it possible to dispatch an action between namespaced modules? E.g. I have Vuex modules "gameboard" and "notification". Each are namespaced. I would like to dispatch an action ...
Chris Schmitz's user avatar
256 votes
5 answers
309k views

How to pass a value from Vue data to href?

I'm trying to do something like this: <div v-for="r in rentals"> <a bind-href="'/job/'r.id"> {{ r.job_title }} </a> </div> I can't figure out how to add the value of r.id ...
bbennett36's user avatar
  • 6,245
251 votes
16 answers
84k views

What is the difference between the views and components folders in a Vue project?

I just used the command line (CLI) to initialize a Vue.js project. The CLI created a src/components and src/views folder. It has been a few months since I have worked with a Vue project and the ...
drsnark's user avatar
  • 2,953
250 votes
19 answers
696k views

Vue.js redirection to another page

I'd like to make a redirection in Vue.js similar to the vanilla javascript window.location.href = 'some_url' How could I achieve this in Vue.js?
Jimmy Obonyo Abor's user avatar
247 votes
16 answers
504k views

How to set URL query params in Vue with Vue-Router

I am trying to set query params with Vue-router when changing input fields, I don't want to navigate to some other page but just want to modify URL query params on the same page, I am doing this: ...
Saurabh's user avatar
  • 73.1k
246 votes
14 answers
217k views

VueJS conditionally add an attribute for an element

In VueJS we can add or remove a DOM element using v-if: <button v-if="isRequired">Important Button</button> but is there a way to add / remove attributes of a dom element eg for the ...
Don Smythe's user avatar
  • 9,624
245 votes
18 answers
291k views

vuejs update parent data from child component

I'm starting to play with vuejs (2.0). I built a simple page with one component in it. The page has one Vue instance with data. On that page I registered and added the component to html. The ...
Gal Ziv's user avatar
  • 7,232
244 votes
4 answers
209k views

Difference between @click and v-on:click Vuejs

The questions should be enough clear. But I can see that someone use: <button @click="function()">press</button> Someone use: <button v-on:click="function()">...
LorenzoBerti's user avatar
  • 6,924
242 votes
12 answers
286k views

Vuejs: Event on route change

On my main page I have dropdowns that show v-show=show by clicking on the link @click = "show=!show" and I want to set show=false when I change the route. Please advise me on how to realize ...
kipris's user avatar
  • 2,989
234 votes
19 answers
239k views

How to implement debounce in Vue2?

I have a simple input box in a Vue template and I would like to use debounce more or less like this: <input type="text" v-model="filterKey" debounce="500"> However ...
MartinTeeVarga's user avatar
228 votes
5 answers
144k views

How to call an action from within another action in Vuex?

I have the following setup for my actions: get1: ({commit}) => { //things this.get2(); //this is my question! }, get2: ({commit}) => { //things }, I want to be able to call one action ...
muttley91's user avatar
  • 12.5k
223 votes
21 answers
285k views

How to change port number in vue-cli project

How to change the Port number in the Vue-CLI project so that it runs on another port instead of 8080.
salman's user avatar
  • 2,367
218 votes
3 answers
219k views

Vuex - passing multiple parameters to mutation

I am trying to authenticate a user using vuejs and laravel's passport.I am not able to figure out how to send multiple parameters to the vuex mutation via an action. - store - export default new Vuex....
Schwesi's user avatar
  • 4,874
218 votes
4 answers
194k views

Vue 'export default' vs 'new Vue'

I just installed Vue and have been following some tutorials to create a project using the vue-cli webpack template. When it creates the component, I notice it binds our data inside of the following: ...
rockzombie2's user avatar
  • 2,893
213 votes
42 answers
304k views

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, ...
user avatar
211 votes
3 answers
112k views

How to create and use an optional parameter in Vue Router?

I need to route to a certain component in two ways - one with a param, one without. I have searched for optional params and somehow can't find much info. So my route: { path: '/offers/:member', ...
yoyoma's user avatar
  • 3,456
209 votes
14 answers
378k views

Using Environment Variables with Vue.js

I've been reading the official docs and I'm unable to find anything on environment variables. Apparently there are some community projects that support environment variables but this might be overkill ...
Edgar Quintero's user avatar
206 votes
19 answers
415k views

Do we have router.reload in vue-router?

I see in this pull request: Add a router.reload() Reload with current path and call data hook again But when I try issuing the following command from a Vue component: this.$router.reload() I get ...
Saurabh's user avatar
  • 73.1k
204 votes
5 answers
232k views

What is nextTick and what does it do in Vue.js?

I read the docs, but I still can't understand it. I know what data, computed, watch, methods do, but what is nextTick() used for in Vue.js?
hidar's user avatar
  • 5,749
203 votes
15 answers
307k views

Can vue-router open a link in a new tab?

I have a summary page and a detail subpage. All of the routes are implemented with vue-router (v 0.7.x) using programmatic navigation like this: this.$router.go({ path: "/link/to/page" }) However, ...
Tang Jiong's user avatar
  • 2,103
203 votes
6 answers
164k views

[Vue warn]: Cannot find element

I'm using Vuejs. This is my markup: <body> <div id="main"> <div id="mainActivity" v-component="{{currentActivity}}" class="activity"></div> </div> </body> ...
dopatraman's user avatar
  • 13.7k
201 votes
20 answers
297k views

Vue: How do I call multiple functions with @click?

How can I call multiple functions in a single @click? (aka v-on:click)? So far I tried Splitting the functions with a semicolon: <div @click="fn1('foo');fn2('bar')"> </div>; ...
S Panfilov's user avatar
  • 17.3k
196 votes
12 answers
71k views

How do I hide the VueJS syntax while the page is loading?

maybe this is a trivial question. so, when I run my vuejs application on browser with enables throttling download speed (sets to low connection). I got unfinished vue syntax output in browser. I ...
antoniputra's user avatar
  • 4,321
195 votes
22 answers
253k views

How to mock window.location.href with Jest + Vuejs?

Currently, I am implementing unit tests for my project and there is a file that contains window.location.href. I want to mock this to test and here is my sample code: it("method A should work ...
Hoang Subin's user avatar
  • 7,140

1
2 3 4 5
2163