Tagged Questions
0
votes
0answers
8 views
Vue.js Spread Operator instead of Vue.set / Vue.delete
I would like to use the spread operator to add/remove object properties while maintaining reactivity.
In a Vuex mutation, the following works:
Vue.set(state.sportTypes.sports, sportName, ...
0
votes
0answers
9 views
Getting router params into Vuex actions
I would like to pass router params into Vuex actions, without having to fetch them for every single action in a large form like so:
edit_sport_type({ rootState, state, commit }, event) {
const ...
0
votes
1answer
20 views
Ellipsis filter vueJs
I'm rendering dynamically a text content into a dom element with Vue.JS
<article>{{ movie.summary }}</article>
what I'm trying to achieve is creating an auto-ellipsis filter so I would ...
0
votes
1answer
28 views
Accessing rootState in Vuex getter
How do you access rootState in getters?
const getters = {
getParams: rootState => {
return rootState.route.params
},
}
The above doesn't work. How is this done?
0
votes
0answers
13 views
Unable to get rootState in getter
Why does this simple getter in a Vuex module fail to do what API reference says?
const getters = {
myGetRootState: (state, rootState) => {
return rootState
}
}
Getter above returns ...
0
votes
1answer
38 views
Vue.js does not render correctly using template
I am working with Vue.js and Django. My goal is to display a list of bins, which I get over a REST API.
Here's my JavaScript-Code:
Vue.component('bin-detail', {
template: '#bin-detail',
props: ['bin'...
0
votes
2answers
25 views
How to v-bind background?
Im trying to do something like this:
<div class="seller_image" :style="{background: url(' + user_credentials.avatar +'); background-size: cover !important; display:block;}">
but i get this ...
0
votes
2answers
31 views
Use method in template, out of instance vue
This is warning when i click on go to contact in tab about: "Property or method "switchTo" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in ...
-2
votes
0answers
24 views
Problems pagination with vue and vue-router
I got a problem when building SPA with vuejs using vue-router.
Everything works great without pagination. But when i go to next page. It is not update new Route
Somebody helps me out, please!
Here ...
0
votes
3answers
30 views
Laravel 5.4 and Vue 2.0.1 Cannot read property 'get' of undefined
I am using Vue Templating with the new Laravel 5.4. In my Office.vue I have this code.
<template>
<div class="container">
<div class="row">
<div class="...
1
vote
0answers
53 views
Infinite update loop
I'm trying to build a reusable Image Loader component in Vue.js, which should:
Manage its own thumbnail data
Take src from parent as prop
Display different thumbnails based on prop, using same ...
0
votes
0answers
24 views
How to perform a transition on a simply component load with Vue.js
This is what the Vue.js documentation state:
Vue provides a transition wrapper component, allowing you to add
entering/leaving transitions for any element or component in the
following contexts:...
0
votes
0answers
33 views
Force click to be assigned to parent element
The element (+) below is hijacking the dashed div's click event handler, leaving me without access to the div's attributes.
I would like to assign all clicks within the div, to the div.
Using Vue.js
...
0
votes
4answers
32 views
vue 2 parent get children component data
I'm using vue2 to develop my project.
When the component mounts (or beforeMounts), it fetches initial data from vuex, and put it to component's data. After the user clicks the button, it triggers the ...
0
votes
2answers
43 views
How to add event listener to <router-link> component, using “v-on:” directive? (VueJS + Vue-router)
My code doesn't work. Maybe I do something wrong? Code purpose was to generate custom event 'appSidebarInlineButtonClick' on "click" event:
<template>
<router-link
:to="to"
...
0
votes
1answer
33 views
v-if and v-else shows while page is loading?
Problem is that both divs shows on load. I tried to use v-cloak only on one but its not working. If i put on parent div then its not look good while is hidden. Any suggestion how can i display only ...
0
votes
3answers
84 views
Vue.js create dynamic AJAX response based multiple components
I am trying to create an SPA using dynamic server response.
For e.g. data returned is:
components: [
{
name: "Parent1",
data: {...},
children: [
{
component: {
...
1
vote
1answer
35 views
VueJS dynamic property name not updating value
I am trying to implement an associated array combined with accessing the property within the value, the key is based on the value of the campaign object.
<li v-for="campaign in campaigns">
&...
1
vote
1answer
33 views
vue - select option change triggers vuex mutation error
I'm using vue2.
I want to get select option object in v-for
HTML:
<select
class="custom-select"
@change="onPlanSelected($event)"
v-model="selectedPlan.objectId">
...
3
votes
2answers
32 views
How to change a specific (this) button class when click on. Using Vue.js 2.0
When clicked the any of the buttons they are all turns active. So what i want is just the clicked one should be changed.
var vm = new Vue({
el: '#toolBtns',
data: {
isActive: false
},
...
1
vote
1answer
25 views
Vue.js 2.0 Dynamic Props Docs
js 2.0 and I'm stock in dynamic props.
See Image attached
My HTML code like this:
<div id="app">
<div>
<input v-model="parentMsg">
<br>
<child v-...
1
vote
1answer
49 views
Extend vue.js component from third-party library
I'm using component ElDatepicker from element-ui and I want to change it's template and event handler method.
I'm trying to do something like this in single file component:
import Vue from 'vue';
...
0
votes
0answers
50 views
I can't pass a parameter to props with VueRouter
I'm trying to pass a parameter to a component prop with VueRouter.
My route:
const router = new VueRouter({
routes: [
{ path: '/lights/:lightid', component: LightDetail, props: true }
]
})
...
3
votes
1answer
39 views
Calling multiple methods on an event handler
I would like to do this
@click="update_value && selected = true"
Clearly it fails and so does this:
@click="update_value"
@click="selected = true">
How do I run multiple methods from a ...
2
votes
1answer
33 views
How to get value in vue.js from select?
Im trying to get value of select region in vue.js but i get an empty value.
alert(this.property_credentials.district);
Any suggestion how can i get value from select ?
<select v-model="...
1
vote
1answer
33 views
Vue Router beforeRouteLeave doesn't stop subcomponents
I have a simple question. I just want to cancel sub-component when route changed. Here is a sample. There is a home component which is the parent. And it has a subcomponent. I just want to stop ...
3
votes
2answers
51 views
Vue.js proper random ordering of v-for loop
Have a list that i want to output in random order.
I achieved this with computed property:
<div id="app">
<ul>
<li v-for="list in randomList" >
{{ list.text }}
<...
-1
votes
2answers
19 views
How to bind v-model with select if i have foreach in foreach?
When i alert(this.property_credentials.district) in vue.js i get empty
<select v-model="property_credentials.district" name="district" class="country selectpicker" id="selectCountry" data-size="10"...
1
vote
4answers
63 views
JavaScript/VueJS: Check if an Array contains an object with an element that has specific value
I would like to solve this problem:
I got an Object that contains a property named specs. This property contains an Array of Objects that all have 2 properties:
name
value
So my object is like this:...
2
votes
3answers
85 views
Smoothly animate v-show in VueJS
I was trying to animated two divs using transition in Vuejs. Below is the code (jsfiddle) that I've used. But don't know why it's not working
https://jsfiddle.net/k6grqLh1/16/
vue
<div id="vue-...
0
votes
0answers
18 views
Vue and Firebase: Prevent some `data` from being saved to Firebase
I have a component that gets synced to Firebase. I want instances of the component to have some properties that do not get synced to Firebase:
Vue.component('myComponent', {
data: function(){
...
firebase
0
votes
1answer
27 views
Vue 1.0 src binding
It doesn't work. Why?
<img v-if="item.foto.src" v-bind:src="item.foto.src" width="{{item.foto.width}}" height="{{item.foto.height}}" />
This causes an error in browser, although the image is ...
1
vote
2answers
91 views
Data variable not updating from method in VueJS
I'm using the following code to get visitors zip code(pin code) from HTML5 geolocation API. However, I want to get that zip code and update it to a data variable 'pincode'. Below is the code I used, ...
1
vote
1answer
26 views
State mutated by getter
I'm trying to write a getter that returns a simple number from state, decremented by 1
const getters = {
getCurrentView: state => {
return types.PAGES_OBJECT[state.currentViewNum]
},
...
0
votes
1answer
35 views
Vue template or render function not defined yet I am using neither?
This is my main javascript file:
import Vue from 'vue'
new Vue({
el: '#app'
});
My HTML file:
<body>
<div id="app"></div>
<script src="{{ mix('/js/app.js') }}">&...
0
votes
3answers
42 views
Class Binding ternary operator
I have some rather cumbersome logic I would like to apply to an element class.
:class="{sportTypes.sports.indexOf(sport) > -1 ? 'is-primary' : 'is-outlined'}"
The above doesn't work, while the ...
0
votes
1answer
63 views
CSS frameworks in Vue.js
I would like to integrate Bulma into my Vue.js project.
I have previously included included the CDN script tag into my <head>.
However after that, I followed these official instructions for ...
1
vote
0answers
25 views
Vue-cli multisite structure
I have to make a multi-site project with 4 different domains but with a lot of components in common. For now I'm just focus on the design, working with this fast structure:
src
main.js with require(...
0
votes
1answer
22 views
Reference element property within another property
I am trying to access properties (fieldType, value) within an dynamic property (:class)
<div fieldType="favoriteSports"
@click="update_favorite_sports"
value="Soccer"
:class="{...
1
vote
0answers
32 views
Vue.js 2.x: `v-model` and `:type`
:type is not supported by v-model, but works with :value + @input.
If it is just syntactic sugar, why the difference?
https://vuejs.org/v2/guide/components.html#Form-Input-Components-using-Custom-...
-1
votes
2answers
30 views
VueJS - Multiple js files in dist after building
When I run "npm run build", instead of getting the single build.js file, I'm getting 4 or 5 javascript files. Those javascript files have around 1MB in size. Why is this so?
Below is the folder ...
0
votes
3answers
109 views
How to update data on a page without refreshing on the vue.js?
My view is like this :
<div class="favorite" style="margin-bottom:5px;">
@if (Auth::user())
<add-favorite-store :id-store="{{ $store->id }}"></add-favorite-store>
...
-1
votes
1answer
86 views
Promise.all() resolves immediately
I'm trying to take some action after upload completion of multiple images, using Promise.all.
However, the code after then runs before the code being dispatched.
What am I confusing here?
...
0
votes
2answers
35 views
Accessing inputnum in <input inputnum=“1”/>
I have created a button that adds file inputs, and would like to display thumbnails for each input.
However I am having issues accessing the custom binding :inputnum on the input.
When I console....
1
vote
1answer
30 views
Mutating Arrays Vuex
The following mutation does not work:
const mutations = {
[types.UPDATE_IMG_URLS] (state, newArray) {
state.imageUrlArray.concat(newArray)
},
(...)
}
However this one does:
const mutations =...
2
votes
1answer
110 views
Switching from vue-resource to axios
With vue-resource, we could set the root url in main.js like so:
Vue.http.options.root = 'http://localhost:3000/api'
I tried replacing that with:
axios.defaults.baseURL = 'http://localhost:3000/api'...
0
votes
1answer
37 views
Vue.js method called multiple times using $emit and $on when it should only be called once
I'm using a bus to allow components to interact with other components via the method described in this link: https://forum.vuejs.org/t/create-event-bus-in-webpack-template/4546/2 .
I have a method ...
3
votes
1answer
44 views
How dynamic add events to a tag in my custom grid component
<template>
<tbody>
<template v-for="(row,index) in datalist">
<tr @click="rowevent != null?rowevent(row,this.$el):''" :class="index % 2 === 0?bodytrclass[0]:bodytrclass[1]"...
1
vote
1answer
42 views
How to render the data after the API Call? (Vue.js)
So the following template is rendered immediately, and it does not wait for the API call.
The solution I found is using v-if in order to keep the elements from rendering until the data is there.
...
0
votes
1answer
29 views
Binding img src
I have an img tag in a Vue component with a binded src attribute to Vuex state.
<img :src="this.$store.state.imageDataURI">
I am successfully updating that state object in Vuex (see below).
...
