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.
vue.js
108,140
questions
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 ...
- 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 ...
- 22.2k
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?
- 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 ...
- 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 ? ''...
- 6,205
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 ...
- 20.7k
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?
- 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'...
- 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 ...
- 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 ...
- 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 ...
- 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:
...
- 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 ...
- 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 ...
- 11.6k
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 '...
- 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 ...
- 3,995
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 ...
- 3,228
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?...
- 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 ...
- 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-...
- 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.
- 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 ...
- 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....
- 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: {
...
- 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 ...
- 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:
...
- 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 ...
- 20.7k
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 ...
- 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 ...
- 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?
- 7,715
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:
...
- 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 ...
- 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 ...
- 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()">...
- 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 ...
- 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 ...
- 10.8k
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 ...
- 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.
- 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....
- 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:
...
- 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, ...
user6102188
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',
...
- 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 ...
- 4,381
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 ...
- 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?
- 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, ...
- 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>
...
- 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>;
...
- 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 ...
- 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 ...
- 7,140