Questions tagged [vuejs2]
Use this tag for questions specific to version 2 of Vue.js, an open-source, progressive JavaScript framework for building user interfaces. Consider also using the main [vue.js] tag in addition to this one.
vuejs2
26,441
questions
498
votes
21
answers
557k
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.1k
353
votes
13
answers
392k
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 ...
- 72.6k
312
votes
9
answers
265k
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
23
answers
465k
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.5k
310
votes
22
answers
424k
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,467
306
votes
11
answers
288k
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,733
305
votes
28
answers
362k
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,168
298
votes
13
answers
153k
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,781
280
votes
15
answers
454k
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,551
258
votes
2
answers
120k
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.5k
248
votes
19
answers
683k
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,655
246
votes
16
answers
81k
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,903
243
votes
18
answers
286k
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,122
241
votes
14
answers
211k
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,494
239
votes
12
answers
278k
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,949
231
votes
18
answers
235k
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.7k
221
votes
21
answers
278k
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,347
218
votes
3
answers
218k
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,834
200
votes
5
answers
220k
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,619
186
votes
29
answers
506k
views
[Vue warn]: Property or method is not defined on the instance but referenced during render
The following code has been written to handle an event after a button click
var MainTable = Vue.extend({
template: "<ul>" +
"<li v-for='(set,index) in settings'>" ...
- 2,169
185
votes
16
answers
126k
views
Only show slot if it has content
Is there a way to only display a slot if it has any content?
For example, I'm building a simple Card.vue component, and I only want the footer displayed if the footer slot has content:
Template
<...
- 8,449
185
votes
6
answers
251k
views
Vuex - Computed property "name" was assigned to but it has no setter
I have a component with some form validation. It is a multi step checkout form. The code below is for the first step. I'd like to validate that the user entered some text, store their name in the ...
- 18.4k
184
votes
25
answers
1.7m
views
How to solve 'Redirect has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header'?
I am working on an app using Vue js.
According to my setting I need to pass to a variable to my URL when setting change.
<!-- language: lang-js -->
$.get('http://172.16.1.157:8002/...
- 2,886
181
votes
6
answers
143k
views
Passing props dynamically to dynamic component in VueJS
I've a dynamic view:
<div id="myview">
<div :is="currentComponent"></div>
</div>
with an associated Vue instance:
new Vue ({
data: function () {
return {
...
- 7,092
181
votes
5
answers
81k
views
How do I call a getter from another getter in Vuex?
Consider a simple Vue blog:
I'm using Vuex as my datastore and I need to set up two getters: a getPost getter for retrieving a post by ID, as well as a listFeaturedPosts that returns the first few ...
- 2,139
178
votes
8
answers
172k
views
Vuex state on page refresh
My app uses the Firebase API for User Authentication, saving the Login status as a boolean value in a Vuex State.
When the user logs in I set the login status and conditionally display the Login/...
- 2,404
173
votes
23
answers
253k
views
Vue.js dynamic images not working with webpack
I have a case where in my Vue.js with webpack web app, I need to display dynamic images. I want to show img where file name of images are stored in a variable. That variable is a computed property ...
- 72.6k
171
votes
7
answers
81k
views
Communication between sibling components in Vue.js 2.0
Overview
In Vue.js 2.x, model.sync will be deprecated.
So, what is a proper way to communicate between sibling components in Vue.js 2.x?
Background
As I understand Vue.js 2.x, the preferred method ...
- 17.1k
163
votes
19
answers
197k
views
Which command do I use to generate the build of a Vue app?
What should I do after developing a Vue app with vue-cli?
In Angular there was some command that bundle all the scripts into one single script.
Is there something the same in Vue?
- 2,409
161
votes
7
answers
231k
views
Vue.js img src concatenate variable and text
I want to concatenate Vue.js variable with image URL.
What I computed:
imgPreUrl : function() {
if (androidBuild) return "android_asset/www/";
else return "";
}
If I build for android:
<...
- 2,414
161
votes
13
answers
100k
views
VueJs 2.0 emit event from grand child to his grand parent component
It seems that Vue.js 2.0 doesn't emit events from a grand child to his grand parent component.
Vue.component('parent', {
template: '<div>I am the parent - {{ action }} <child @...
- 8,739
153
votes
6
answers
148k
views
What's the correct way to pass props as initial data in Vue.js 2?
So I want to pass props to an Vue component, but I expect these props to change in future from inside that component e.g. when I update that Vue component from inside using AJAX. So they are only for ...
- 3,686
149
votes
8
answers
122k
views
Vue.js - Making helper functions globally available to single-file components
I have a Vue 2 project that has many (50+) single-file components. I use Vue-Router for routing and Vuex for state.
There is a file, called helpers.js, that contains a bunch of general-purpose ...
- 6,521
145
votes
7
answers
343k
views
How to call a vue.js function on page load
I have a function that helps filter data. I am using v-on:change when a user changes the selection but I also need the function to be called even before the user selects the data. I have done the same ...
- 2,252
144
votes
7
answers
246k
views
Vue - Deep watching an array of objects and calculating the change?
I have an array called people that contains objects as follows:
Before
[
{id: 0, name: 'Bob', age: 27},
{id: 1, name: 'Frank', age: 32},
{id: 2, name: 'Joe', age: 38}
]
It can change:
After
...
- 7,607
138
votes
7
answers
73k
views
How can I solve "Interpolation inside attributes has been removed. Use v-bind or the colon shorthand"? Vue.js 2
My Vue.js component is like this:
<template>
<div>
<div class="panel-group" v-for="item in list">
...
<...
- 6,976
134
votes
4
answers
109k
views
How to add multiple data types for VueJs Props?
This error got me when passing different values to the component.
- 4,785
134
votes
4
answers
108k
views
Meaning of v-slot:activator="{ on }"
Looking at the Vuetify example code for v-toolbar, what is the purpose of v-slot:activator="{ on }"? For example:
<template v-slot:activator="{ on }">
<v-toolbar-title v-on="on">
&...
- 2,471
129
votes
10
answers
142k
views
v-model and child components?
I have a form and bind an input using v-model:
<input type="text" name="name" v-model="form.name">
Now I want to extract the input and make it it's own component, how do you then bind the ...
- 23.5k
129
votes
9
answers
304k
views
How to remove an item from an array in Vue.js
I am new to vue.js (2) and I am currently working on a simple event app. I've managed to add events but now I would like to delete events based on clicking on a button.
HTML
<div class="list-...
- 7,137
129
votes
8
answers
263k
views
How can I go back/route-back on vue-router?
Ok, to explain this simply:
I have 3x pages.
Page 1 (Home)
Page 2 (Menu)
Page 3 (About)
Page 1 has a-
<router-link to="/menu">
button that when clicked routes to "/menu".
...
- 2,217
128
votes
6
answers
63k
views
What's the equivalent of Angular Service in VueJS?
I want to put all my functions that talk to the server and fetch data into a single reusable file in VueJS.
Plugins don't seem to be the best alternative. Template less components..?
- 4,208
127
votes
6
answers
128k
views
Prevent on click on parent when clicking button inside div
Is it possible to prevent the function on the <div> element from running when clicking the button inside the div?
When clicking the button element, the function: toggleSystemDetails should not ...
- 1,495
126
votes
18
answers
151k
views
NavigationDuplicated Navigating to current location ("/search") is not allowed
When I want to do a search multiple times it shows me the NavigationDuplicated error. My search is in the navbar and the way I have configured the search is to take the value using a model and then ...
- 1,587
124
votes
7
answers
276k
views
How to include css files in Vue 2
I'm new to vue js and trying to learn this. I installed a fresh new version of vue webpack in my system. I'm having a css, js and images of this a theme template which I want to include into the HTML ...
- 6,186
123
votes
10
answers
120k
views
In vue.js component, how to use props in css?
I'm new to vue.js. Here is my problem:
In a *.vue file like this:
<template>
<div id="a">
</div>
</template>
<script>
export default {
name: 'SquareButton',
...
- 1,243
119
votes
7
answers
306k
views
Vue.js: Conditional class style binding
I have some data that is accessible via:
{{ content['term_goes_here'] }}
... and this evaluated to either true or false. I'd like to add a class depending on the truthiness of the expression like ...
- 6,484
118
votes
5
answers
69k
views
Change another module state from one module in Vuex
I have two modules in my vuex store.
var store = new Vuex.Store({
modules: {
loading: loading
posts: posts
}
});
In the module loading, I have a property saving which can be ...
- 90.3k
115
votes
4
answers
193k
views
How to access external json file objects in vue.js app
How to access JSON objects in the vue.js app I am new in this
import json from './json/data.json'
the JSON file is loaded and now I have to access the objects within it
- 1,643
113
votes
13
answers
240k
views
How to listen to the window scroll event in a VueJS component?
I want to listen to the window scroll event in my Vue component. Here is what I tried so far:
<my-component v-on:scroll="scrollFunction">
...
</my-component>
With the scrollFunction(...
- 7,707