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.
105,754
questions
790
votes
21
answers
1.1m
views
What is "not assignable to parameter of type never" error in TypeScript?
Code is:
const foo = (foo: string) => {
const result = []
result.push(foo)
}
I get the following TS error:
[ts] Argument of type 'string' is not assignable to parameter of type 'never'.
What ...
- 14k
698
votes
16
answers
575k
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 ...
- 9,884
564
votes
49
answers
676k
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 ...
- 20.8k
537
votes
13
answers
576k
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?
- 10.9k
492
votes
21
answers
526k
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 ...
- 20.8k
475
votes
18
answers
768k
views
How to fix 'Unchecked runtime.lastError: The message port closed before a response was received' chrome issue?
I'm using VueJS and Laravel for my project. This issue started to show lately and it shows even in the old git branches.
This error only shows in the Chrome browser.
- 5,212
434
votes
16
answers
591k
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,167
428
votes
13
answers
158k
views
What does the @ mean inside an import path?
I'm starting out 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 ...
- 20.2k
397
votes
22
answers
675k
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.1k
368
votes
6
answers
222k
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,811
363
votes
16
answers
214k
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,575
349
votes
17
answers
351k
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,309
340
votes
13
answers
371k
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 ...
- 71.6k
336
votes
15
answers
358k
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.3k
309
votes
22
answers
413k
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,457
309
votes
9
answers
257k
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,945
308
votes
22
answers
443k
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.3k
304
votes
22
answers
622k
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;
...
- 29k
301
votes
28
answers
351k
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,129
301
votes
2
answers
173k
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.5k
300
votes
11
answers
278k
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,653
288
votes
12
answers
148k
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,671
284
votes
4
answers
255k
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,700
277
votes
32
answers
359k
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,271
275
votes
6
answers
243k
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,446
267
votes
15
answers
426k
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,401
264
votes
13
answers
79k
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,013
259
votes
13
answers
658k
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:
...
- 53.6k
256
votes
2
answers
118k
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.2k
247
votes
5
answers
290k
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,075
241
votes
18
answers
275k
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 ...
- 6,942
241
votes
4
answers
197k
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,734
240
votes
15
answers
76k
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,823
239
votes
19
answers
650k
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,375
236
votes
12
answers
262k
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,919
235
votes
12
answers
196k
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,254
229
votes
18
answers
226k
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.5k
229
votes
15
answers
448k
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 like this:
...
- 71.6k
225
votes
5
answers
138k
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.3k
218
votes
21
answers
262k
views
How to change port number in vue-cli project
How to change Port number in Vue-cli project so that it run's on another port instead of 8080.
- 2,317
215
votes
3
answers
214k
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,753
214
votes
4
answers
183k
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,845
209
votes
41
answers
283k
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
203
votes
14
answers
341k
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,253
203
votes
6
answers
162k
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.4k
202
votes
3
answers
102k
views
Optional param in vuejs 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,356
196
votes
18
answers
381k
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 ...
- 71.6k
195
votes
12
answers
70k
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,261
193
votes
20
answers
279k
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>;
...
- 16.7k
190
votes
4
answers
174k
views
Default values for Vue component props & how to check if a user did not set the prop?
1. How can I set the default value for a component prop in Vue 2? For example, there is a simple movies component that can be used in this way:
<movies year="2016"><movies>
Vue.component(...
- 3,559