Tagged Questions
Vue.js is a library for building interactive web interfaces. It creates data-driven user interfaces with a simple and flexible API.
1
vote
1answer
20 views
Material design input with bootstrap-4
I am creating a vue webapp and using bootstrap-4 as CSS framework. I want to have input fields like material design, But bottstrap have only older design of input fields with border on all sides and ...
-4
votes
0answers
13 views
vue 2 input value default
It is necessary in through HTML (via PHP) code to pass the value of a variable, how to do it as simple as possible, without a declaration of global variables, such as the well to pass through ...
0
votes
0answers
13 views
How to design a store in Vuex to handle clicks in nested, custom components?
I'm trying to design a store to manage the events of my Vuex application. This far, I have the following.
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
const state = { dataRows: [], ...
0
votes
1answer
14 views
How to manage v-bind and v-on together, with Vue2?
This is my line of code inside a v-foor loop :
<div class="box-comment" v-for="p in products">
<span v-on:click="addProduct(@{{ p.sku_f }})" class="btn text-muted pull-right"><i ...
0
votes
1answer
9 views
Vue server-side rendering: app not being rehydrated, no error thrown
I have a working Vue app in my dist directory: when served by a server, everything works fine.
When I try to add server-side rendering using vue-server-renderer, it doesn't work. The page loads, but ...
0
votes
2answers
15 views
Bound style not applying rapid updates to underlying value
I have this bound style:
<div :style="{height: errHeight}"
From this computed property:
errHeight() { return Math.ceil(this.errors.length * 20 + 7) + 'px'; }
this.errors refers to this computed ...
0
votes
1answer
16 views
How to pass data to single file components in Vue.js?
I have a single file component header.vue:
<template>
<h1>{{text}}</h1>
</template>
<script>
export default {
data() {
return {
text: 'Header text'...
0
votes
1answer
30 views
Replacement for filterby in vuejs 2
I am using django with vue js. I am following a tutorial for vue js and they have used vuejs 1 and I wanted to use vuejs 2.
How to change this statement from vuejs1 to vuejs2?
v-for=" (story,index) ...
2
votes
1answer
30 views
Decoupled components with centralized states in Vuex + vue-router
The problem with share states is that is difficult to reuse actions and mutations in differents components.
Lets imagine that we we have a component Votes. This component allow users to vote on item
...
1
vote
2answers
20 views
Vue.js nodeName variable
I'd like to create a template such as
<{{ headerType }}>{{ text }}</{{ headerType }}>
and bind data
{
headerType: 'h3', // or h1, h2...
text: 'Header text'
}
The resulting template ...
0
votes
1answer
21 views
Vue js rerender the same component when changing route
I have one auth component that I am using both in the login and the signup route.
const routes = [{
path : '/',
name: 'home',
component: Home
}, {
path : '/signin',
name: 'signin',
...
0
votes
1answer
18 views
vuejs Can't access refs from component
I am trying to get the canvas element which is inside a template of a component, found great documentations for vuejs1 but not for vuejs2 where "ref" is the only way to get the element. I am getting ...
1
vote
2answers
22 views
How to filter out getters and setters when console logging Vuejs data?
I am writing a vue js app.
When I console log the data from the vue instance I see it with it's getters and setters which are not relevant to me.
var vm = new vue({
data () { return { testData: { ...
0
votes
1answer
13 views
How to use babel-polyfill in the following case?
This is the original code from the Vue Webpack template:
entry: {
app: './src/main.js'
},
This is an example that I found on the Internet:
entry: [
'babel-polyfill',
'./src/main.js'
],
...
0
votes
1answer
11 views
Bound class not applying in javascript transition
I have this element:
<transition v-on:enter="slideFadeIn" v-on:leave="fadeSlideOut">
<div :style="{height: errHeight}"
v-show="errors.length > 0"
:class="{'height-tr': visible}...
0
votes
1answer
15 views
Does Vue.JS work with AJAX http calls?
I am trying to do the following from my HTML:
var vm = new Vue({
el: '#loginContent',
data: {
main_message: 'Login',
isLoggedIn: false,
loginError: '',
...
1
vote
2answers
17 views
Display {{ }} Jade-Angular-React-Vue
I'm trying to add {{}} for angular {{}} to Jade.
In html you do this
<p>{{ whatever }}</p>
In jade, my understanding was:
p {{ whatever }}
But it is not working. Any insight on how ...
0
votes
0answers
11 views
Electron Dialog send file to server with vue resource
I am building an electron app which handles file uploads, I am using dialog to get the files from user, I need to send the files to server but I am getting the files path but I get errors when sending ...
1
vote
1answer
19 views
Vue.js force re-render of component which contains v-once directive
Vue 2.0
I have a component which contains a div using the v-once directive to prevent re-render. This same component updates the data it displays when URL parameters change (i.e. vue-router link is ...
0
votes
1answer
25 views
Property or method not defined on the instance but referenced during render i Vuex
I'm getting the following error.
[Vue warn]: Property or method "updateData" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data ...
0
votes
2answers
17 views
computed v-model in select tag in Vuejs2
I have a component whose markup is
<select id="create-claim-start_date" type="text" class="form-control" v-model="startPeriod">
<option value="0">January&...
4
votes
0answers
69 views
Vue.js v-html contenteditable prevent dom refresh to keep cursor / caret from jumping
For reference I'm using Vue 2.0, Vuex, and Firebase.
I am building a contenteditable component using the v-html binding to render the innerHTML. The data is updated onKeyUp. Whenever the data is ...
3
votes
1answer
174 views
Passing vuex module state into vue-router during beforeEach
I am using VueJS in conjunction with vuex and vue-router. I have a vuex module that is making a mutation to its store, and trying to use that to determine whether or not a user is authenticated.
Here ...
1
vote
1answer
51 views
VueJs 2 - Using Multiple Custom Filters
Vuejs 2.0 deprecated the built in filters (filterby, orderby, limitby) when using v-for. I'm trying to recreate the functionality of the filterby and orderby filters.
I have both filters working ...
0
votes
2answers
297 views
Trigger v-on:change with Bootstrap switch
I'm making my first script using Vue, and I think I love it ;)
I have a problem with the bootstrap switch: http://www.bootstrap-switch.org/
It never triggers the v-on:change on this component:
...
1
vote
0answers
22 views
Vue 2.0 Webpack “need approprate loader” for template in .vue files
I was having a hard time figuring out some features in with a bootstrapped vue-cli project. I didn't want to use the webpack-dev-server because I wanted to use my own express app to serve the index....
0
votes
1answer
25 views
Cannot pass properties to a component in a slot in vue.js?
I'm trying to use Vue.js (v2.1.3) to create nested components but I can't figure out how to bind data between them.
This JSFiddle demonstrates what I'm trying to achieve.
HTML...
<div id="test"...
1
vote
2answers
40 views
using bootstrap with vue webapp : How to customise
I am using bootstrap-4 in my Vue webapp, But I am not able to customise this as is explained here.
I have my index.html which uses Bootstrap CDN, like following:
<!DOCTYPE html>
<html lang="...
0
votes
1answer
22 views
Error- Failed to mount component: template or render function not defined. (found in root instance)
I am using browserify and NPM to pull in vue.
var Vue = require('vue');
module.exports = function() {
new Vue({
el: '#app',
data: {
message: 'Hello Vue2!'
}
})
}
I get the mount error. ...
2
votes
1answer
4k views
'import' and 'export' may only appear at the top level
I'm using webpack with vuejs. Webpack does its thing, but when I look at the outputted app.js file, it gives me this error.
'import' and 'export' may only appear at the top level
I'm assuming it'...
3
votes
2answers
2k views
Understanding component props in VueJS
I'm trying out vuejs by following along with the laracasts series of webcasts on this. In https://laracasts.com/series/learning-vue-step-by-step/episodes/8, Jeffery Way discusses custom components. I ...
0
votes
1answer
19 views
How could I switch <a href=“/main/@{{item.id}}”> to v-bind:href in Vue2.0?
I want to splice attribute like href use v-bind:href in vue2?
for example <a href="/main/@{{item.id}}"> to v-bind:href="/main/@{{item.id}}"
-1
votes
2answers
889 views
How to trigger a method at page load in vuejs?
Hy.. I have quetion about vuejs and my quetion How to trigger a method at page load like tab..?
for example:
<div id='wraper'>
<!-- div id menu not load -->
<div id="menu">
...
4
votes
1answer
119 views
+50
How to use keep-alive on routed comps seperately in vue-router
I've got a question about keep-alive in vue-router. I want to create a list-detail structured app, so I need to refresh the detail comp every time but keep the scroll position of the list comp. As the ...
0
votes
1answer
25 views
Vuex getter not updating
I have the below getter:
withEarmarks: state => {
var count = 0;
for (let l of state.laptops) {
if (l.earmarks.length > 0) {
count++;
}
}
return count;
...
1
vote
2answers
56 views
Iterate over JSON and print values in Vue.js
I am quite new to Vue and am attempting to retrieve a JSON response from an API and then print this on my page.
This is what I have so far:
<body>
<div id="mystats" class="container">...
2
votes
2answers
32 views
How do you activate a class for individual elements within an array? [Vue.js]
I want to activate a class for each input individually. I have two inputs bound to the same v-model and class. I have a method that checks for something to be true, and if true enables the bound class....
1
vote
2answers
45 views
CORS issue with Vue.js
I'm using:
Vue 2.0.3
vue-router 2.0.1
vuex 0.8.2
vue-resource 0.7.0
And after trying to login to my page when using remote API, not the locally run one, I get cors error like following
vue-resource....
azure
-1
votes
1answer
23 views
Looping through data array properties in VueJS
In vuejs you can do list rendering in the template like
<td v-for="item in items"></td>......
But can you iterate over that same data array property like....
for(var i = 0; i < this....
0
votes
3answers
27 views
Can't update the v-for list when ajax update the data
I using a datepicker and using javascript to pass the date to the vue instance, but after the first time render the list using v-for, when i call the function with other date, it keeps the previous ...
-1
votes
1answer
27 views
Dynamic Template (Component) Probs to Class Binding Issue using Vue Js
I try to make dynamic template to assign the class by condition base.
My Template is :
<template v-if="showTemplate" id="campaignBlock">
<div v-class="@{{ block_class }}">
// <div ...
0
votes
1answer
39 views
Pre-compile TypeScript Vue components with template string
I have a Vue site that is built with Webpack. I have a TypeScript file that contains a component:
// my-component.ts
import Vue = require('vue');
export default Vue.component("my-component", {
...
0
votes
1answer
16 views
Vue router: Gulp uglify / watch node error
Just starting with Vue router and following the getting started but having issues straight away.
Using the same code as the example:
const Home = { template: '<div>Home</div>' }
const ...
2
votes
0answers
34 views
Vue server-side rendering with vue-router: error thrown
I have a simple app with Vue and vue-router (no vuex), and I need server-side rendering. I'm using pretty much the server code from here:
https://github.com/vuejs/vue-hackernews-2.0
My client-entry....
0
votes
1answer
24 views
Vue dynamic component event bindings
I have a dynamic component that is resolved and bound on runtime using the documented dynamic component syntax;
<div class="field">
<component v-if="component" :is="component" @...
0
votes
1answer
23 views
Reactive computed data in VueJs 2.0
I have a paginated record set from a http response and want to further implement client side pagination on return paginated record set, thus I have the following component markup
<td v-for="item ...
0
votes
2answers
66 views
Vue structuring with Vuex and component-specific data
I see a lot of Vue.js projects using this structure:
├── main.js
├── api
│ └── index.js
│ └── services #containing files with api-calls
│ ├── global.js
│ ├── cart.js
│ ...
2
votes
3answers
173 views
Proper way to re-initialize the data in VueJs 2.0
I was going through this answer on SO : Is there a proper way of resetting a component's initial data in vuejs?
However, the current method is not allowed now and VueJS prohibits changing the $...
1
vote
1answer
24 views
Executing child method from parent component in Vue.js
Currently, I have a Vue.js components which contains a list of other components. I know that the common way of working with vue is passing data to children, and emitting events to parents from ...
0
votes
0answers
13 views
Laravel Echo repeating listen event for n times broadcast has been made
Okay so the question title is a little, confusing, but I don't know how else to explain it. Basically, I've got laravel-echo-server, redis (for queueing), and Laravel echo set up. All I want is to ...
