Software

I would like to share my Vue js application project which is in my repository with a friend. So I used vue-cli, npm/yarn and webpack to develope. I would like to know if he needs to install also cli to run the app on his computer, or just npm install and npm run? thanks

I am trying to do some conditional templating where I have to separated the opening and closing tags of some elements. But can't get it to work until they are in the same conditional template tag. As soon as I put the opening tag to one conditional template and the closing tag to another conditional template I get an error. For example:

<template> <div> <template v-if="show"> <ul> <li> one </li> </template> // OTHER CONDITIONAL STUFF IN BETWEEN <template v-if="show"> <li> two </li> </ul> </template> </div> </template> <script> export default { data() { return { show: false } } } </script>

Here I get an error because the opening <ul> tag and closing </ul> tag are in discrete <template v-if=".."> tags. I get this error:

(Emitted value instead of an instance of Error) Error compiling template: <div> <template v-if="show"> <ul> <li> one </li> </template> <template v-if="show"> <li> two </li> </ul> </template> </div> - tag <ul> has no matching end tag.

How can I separate any starting and ending tags inside conditional template tags without breaking the code?

I feel a bit like I'm missing something very simple, but I've been trying different stuff out and searching all over the place and can't figure out how to use a method from a custom plugin in my Vue application.

In 'vuePlugin.js' I have something like:

const myPlugin = {}; myPlugin.install = function(Vue, options){ Vue.myMethod = function(){ console.log("It worked!"); } }

In my main.js I have:

import myPlugin from './js/vuePlugin.js' Vue.use(myPlugin);

Then in my App.vue I have:

export default { name: 'app', props: {}, data () { return{ someData: 'data' } }, beforeCreate: function(){ myMethod(); } }

With this I get an error that "myMethod is not defined".

I've tried saying:

var foo = myPlugin(); console.log(foo);

In my console I get an object called "install" with arguments: "Exception: TypeError: 'caller' and 'arguments' are restricted function properties and cannot be accessed in this context. at Function.remoteFunction"

All of the documentation seems to just show how to create the plugin and "use" it, but not actually how to access anything in it. What am I missing here?

I have a <table> with rows containing form inputs.

I want to simulate a spreadsheet behavior, meaning that when you press the key UP or DOWN the focus should change to the next/previous row's input.

The way I'm building this is attaching an event handler in the input like this:

<td><input v-model="period.end" v-on:keydown="moveIfCursorUpOrDown"></td>

The question is how to focus an input inside a different component inside moveIfCursorUpOrDown method.

I know of this.$refs.nameOfInput.focus(), which works to focus the inputs belonging to the component itself, but I don't know how to use this to focus the input inside a different component.

I'm pretty new with Vue and Js and I'm a bit confused with computed methods. So as follows I create a props to share data from the parent component. Everything works but when the sumTotal method its executed as a default value its displaying Nan on the {{sumTotal}}. How I can fix the sumTotal method?

<v-layout row v-for="color in colors" :key="color.id"> <v-layout > <v-flex > <v-checkbox class="text-xs-right" name="checkbox" v-bind:label="`${color.name}`" v-model="color.checked" light></v-checkbox> </v-flex> </v-layout> <v-layout column> <v-flex > <v-subheader>{{color.price}} €</v-subheader> </v-flex> </v-layout> <v-subheader> {{sumTotal}} €</v-subheader> </v-layout> <script> export default { props: ['myProp'], data: () => ({ colors: [{ id: 1, name: "White", price: 5, }, { id: 2, name: "Green", price: 4, }, { id: 3, name: "Blue", price: 3, }, { id: 4, name: "Red", price: 2, }, { id: 5, name: "Purple", price: 1, }, { id: 6, name: "Yellow", price: 0, }], }), computed: { total: function() { var total = 0; for (var i = 0; i < this.colors.length; i++) { if (this.colors[i].checked) { total += this.colors[i].price; } } return total; }, sumTotal: function() { var myProp = 0; return this.total + this.myProp; } }, } </script>

I'm using Vue.js. I have two arrays, checkedTracks and checkedAlbums. Both are created and populated in the same way (see initialiseAlbums) and both contain elements of type string.

The updateArray method takes an array and array element as parameters. If the element is in the array, it is removed. If it is not in the array, it is added. When I call the method updateArray and pass the checkedTracks array, it performs as expected. However when I pass checkedAlbums, the index is always -1.

While debugging the method with checkedAlbums I noticed a few things.

• The data types of the element being passed in and the array elements are the same
• The array contains data, however array[0] returns undefined
• Manually passing the ID string to the indexOf function still returns 0, despite being identical

Can anyone provide some insight as to what is going on here? Thanks in advance.

<script> import Album from './Album' import EventBus from '../event-bus' import Sort from './Sort' import Modal from './Modal' export default { components: { 'album': Album, 'sort': Sort, 'modal': Modal }, props: { results: [] }, data () { return { allAlbums: [], checkedTracks: [], checkedAlbums: [], artist: {}, createPlaylistMessage: '', showModal: false, published: false, playlistUrl: '' } }, mounted () { EventBus.$on('albums', this.initialiseAlbums) EventBus.$on('artist', this.initialiseArtist) }, computed: { resultsPresent: function () { return this.allAlbums.length > 0 } }, methods: { initialiseAlbums: function (allAlbums) { let self = this self.allAlbums = [] self.checkedAlbums = [] self.checkedTracks = [] allAlbums.forEach(function (album) { if (album.tracks.items !== null) { self.allAlbums.push(album) self.checkedAlbums.push(album.id) album.tracks.items.forEach(function (track) { self.checkedTracks.push(track.id) }) } }) }, initialiseArtist: function (artist) { this.artist = artist }, toggleSingleAlbum: function (albumId) { this.updateArray(this.checkedAlbums, albumId) }, updateTrack: function (trackId) { this.updateArray(this.checkedTracks, trackId) }, updateArray: function (array, element) { let index = array.indexOf(element) if (index > -1) { array.splice(index, 1) } else { array.push(element) } }, updateSort: function (albums) { this.allAlbums = albums }, publishPlaylist: function () { this.published = false let playlist = {} playlist.tracks = this.checkedTracks playlist.name = this.artist.name this.$http.post('/publish', playlist).then(function (response) { if (response.status === 201) { this.published = true this.playlistUrl = response.data this.createPlaylistMessage = 'Playlist created successfully' } else { this.createPlaylistMessage = 'Playlist could not be created' } this.showModal = true }).catch(function (error) { console.log(error) }) } } } </script>

How to start a v-for loop at a specific index. example: A array given array = [a,b,c,d,e,f]; I want use v-for loop which will start looping from 3rd element. Thank you :)

There is a component
It takes some action and a person should not leave without having saving
There is method beforeDestroy()
This works fine, but I do not understand how to stop transition.
Rather, the link changes, but the component has not yet deleted.

How can I apply Vue.js scoped styles to components loaded via <view-router>.

Here is my code:

<template> <div id="admin"> <router-view></router-view> </div> </template> <style lang="scss" scoped> #admin { .actions { display: none; span { cursor: pointer; } } } </style>

When I visit the /posts a component named Posts will be loaded, inside this component I have a

<div class="actions"> some content </div>

The problem is that the style defined in #admin is not applied to .action element. When not scoped, this works fine. The problem come when the #admin component styling is scoped.

Is there any way to do that while keeping the .actions style inside the admin component scoped style tag?

I would like to ask if anyone knows how to integrate pouchdb in a cordova app? I have already created a To Do app in webpack/vue-cli and have successful run them in the browser environment however when I try to package the app for mobile development, it seems that the database I initially used (pouchdb) is not working anymore. I have tried googling every topic I know just to implement this logic but to no avail.

To give you an idea how I developed my app here are the steps:

1. Used vue-cli to create a boilerplate for the app. I have used Vuetify, Vuex, and Vue-router, PouchDB inside the app.
2. After developing the app and successfully run through the browser(with database connection working), I package the app using npm run build of webpack to create a browser compatible distribution.
3. Then I went to create a cordova project using the cordova cli, and then I went to its www folder and replaced the index.html with my webpack app.
4. Then I ran the webpack/cordova app, the only difference is that is does not load any data from my pouchdb database anymore even if I run cordova run browser command.

Thank you

Okay, so I am using webpack-simple for VueJS. I installed a theme called AdminLTE. I tried to import the bootstrap files inside it via the code below. When I run npm run build, the app searches inside the src folder but AdminLTE is inside node_modules folder.

Should I import just those files that I need, or should I import the whole folder. And How do I properly import those files?

My main.js file

import Vue from 'vue' import App from './App.vue' // import BootstrapCSS from 'admin-lte/bootstrap/bootstrap.min.css' // import BootstrapCSSTheme from 'admin-lte/bootstrap/bootstrap-theme.min.css' import 'admin-lte/bootstrap/bootstrap.min.css' import 'admin-lte/bootstrap/bootstrap-theme.min.css' new Vue({ el: '#app', render: h => h(App) })

My Webpack Config

var path = require('path') var webpack = require('webpack') module.exports = { entry: './src/main.js', output: { path: path.resolve(__dirname, './dist'), publicPath: './dist/', filename: 'build.js' }, module: { rules: [ { test: /\.vue$/, loader: 'vue-loader', options: { loaders: { } // other vue-loader options go here } }, { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ }, { test: /\.css$/, use: ['style-loader','css-loader'] }, { test: /\.(png|jpg|gif|svg)$/, loader: 'file-loader', options: { name: '[name].[ext]?[hash]' } } ] }, resolve: { alias: { 'vue$': 'vue/dist/vue.esm.js' } }, devServer: { historyApiFallback: true, noInfo: true }, performance: { hints: false }, devtool: '#eval-source-map' } if (process.env.NODE_ENV === 'production') { module.exports.devtool = '#source-map' // http://vue-loader.vuejs.org/en/workflow/production.html module.exports.plugins = (module.exports.plugins || []).concat([ new webpack.DefinePlugin({ 'process.env': { NODE_ENV: '"production"' } }), new webpack.optimize.UglifyJsPlugin({ sourceMap: true, compress: { warnings: false } }), new webpack.LoaderOptionsPlugin({ minimize: true }) ]) }

I cannot get past this linting error. I feel like I'm tried everything. Can someone help me out?

ERROR in ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/components/Register.vue Module not found: Error: Can't resolve '@/services/AuthenticationService' in 'C:\Users\Sean\Desktop\tabtracker\tabtracker\client\src\components' @ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/components/Register.vue 25:0-69 @ ./src/components/Register.vue @ ./src/router/index.js @ ./src/main.js @ multi ./build/dev-client ./src/main.js

So basically I searched through the web looking for an answer and it seems to be a common enough problem. I checked out the same issue on the official vue forum and was not able to have a successful build. I read through github issues like crazy and still feel no closer.

I've tried rolling babel back and adding a plugin but i'm afraid I'm not adding them to the correct config files, there's so many.

I am using vue-router and want to generate a menu from its items (router obj) at the same time. I am trying to do that using a recursive components. But I am stuck at a infinite loop warning although I have a ending condition. Actually my main problem here occurs when I want to use/modify a level counter in the recursive component that counts the corresponding level. I get this: [Vue warn]: You may have an infinite update loop in a component render function.

This is what I've got:

In order to keep it simple I've reduced the routes and other parts to show just the needed parts for this question.

// routes.js export let routers = [ { name: 'Products', path: 'products', children: [ { name: 'Products2', path: 'products', children: [ { name: 'Products3', path: 'products' } ] } ] }, { name: 'Tables', path: 'simple_tables', }, { name: 'Other Menu', path: 'other_menu', }];

This is the parent of the recursive component. Instead placing the level data to the child component, I placed it to the parent (left-side.vue) so that it can work without being reset on each recursion. I used custom events for communicating between parent and child. Thus I can pass and modify it without a problem.

// left-side.vue <template> <aside class="left-side sidebar-offcanvas"> <section class="sidebar"> <div id="menu" role="navigation"> <navigation-cmp :routes="routes" :level="level" @levelup="levelup()" @leveldown="leveldown()"></navigation-cmp> </div> </section> </aside> </template> <script> import navigationCmp from './navigationCmp'; import {routers} from '../../router/routers'; export default { name: "left-side", data() { return { level: 0 } }, computed: { routes(){ return routers; } }, methods: { levelup(){ this.level++; }, leveldown(){ this.level--; } }, components: { navigationCmp, }, } </script>

Here is the recurring part. Each time it gets into recursion it emits level up to the parent to increase and emits level down to decrease the level variable. And it should actually stop if there is no more children to prevent infinite loop.

<template> <ul class="navigation"> <template v-for="route in routes"> <li> <template v-if="!route.children"> {{ route.name }} </template> <template v-else-if="route.children&&route.children.length>0"> {{ route.name }} <template v-for="child in route.children"> {{ levelup() }} {{ child.name }} <navigation-cmp v-if='child.children&&child.children.length>0' :routes="[child]"></navigation-cmp> {{ leveldown() }} </template> </template> </li> </template> </ul> </template> <script> export default { name: 'navigation-cmp', props: { routes: Array, level: Number }, methods: { levelup(){ this.$emit('levelup'); }, leveldown(){ this.$emit('leveldown'); } } } </script>

Obviously I am doing something wrong here. I am stuck and don't know how I could solve this. What am I doing wrong? Any advise or guidance would really be appreciated.

I have bulit an app based on Vue.js using Monaca,Cordova and onsenUI. I want to show my location using Google map in my page. To implement this I have used a npm package vue2-google-maps but it does not show anything.

The codes I have used are from the official documentation of the package. They are given below:

<template> <v-ons-page> <custom-toolbar>Page 1</custom-toolbar> <div> <gmap-map :center="center" :zoom="7" style="width: 500px; height: 300px" > <gmap-marker :key="index" v-for="(m, index) in markers" :position="m.position" :clickable="true" :draggable="true" @click="center=m.position" ></gmap-marker> </gmap-map> </div> </v-ons-page> </template> <script> import * as VueGoogleMaps from 'vue2-google-maps'; import Vue from 'vue'; Vue.use(VueGoogleMaps, { load: { key: 'AIzaSyDX3SEHwFUY-k_Jp7YMp0-uTvo7up-paXM', v: '3.26', // libraries: 'places', //// If you need to use place input } }); export default { data () { return { center: {lat: 10.0, lng: 10.0}, markers: [{ position: {lat: 10.0, lng: 10.0} }, { position: {lat: 11.0, lng: 11.0} }] } }, props: ['pageStack'], components: { customToolbar } }; </script>

When i run npm install -g vue-cli , it continuously throws this error message:

Screen shot

npm ERR! path C:\Users\End User\AppData\Roaming\npm\node_modules\vue-cli\node_modules\nan\package.json npm ERR! code EPERM npm ERR! errno -4048 npm ERR! syscall unlink npm ERR! Error: EPERM: operation not permitted, unlink 'C:\Users\End User\AppData\Roaming\npm\node_modules\vue-cli\node_modules\nan\package.json' npm ERR! at Error (native) npm ERR! { Error: EPERM: operation not permitted, unlink 'C:\Users\End User\AppData\Roaming\npm\node_modules\vue-cli\node_modules\nan\package.json' npm ERR! at Error (native) npm ERR! stack: 'Error: EPERM: operation not permitted, unlink \'C:\Users\End User\AppData\Roaming\npm\node_modules\vue-cli\node_modules\nan\package.json\'\n at Error (native)', npm ERR! errno: -4048, npm ERR! code: 'EPERM', npm ERR! syscall: 'unlink', npm ERR! path: 'C:\Users\End User\AppData\Roaming\npm\node_modules\vue-cli\node_modules\nan\package.json' } npm ERR! npm ERR! Please try running this command again as root/Administrator.

npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\End User\AppData\Roaming\npm-cache_logs\2017-09-10T06_15_03_457Z-debug.log

• I tried all the possible solutions found online :

  • running from windows cmd with administrator access,

  • npm cache clean

  • closed my text editor

  • restarted my PC

Please do help me solve this issue.

I am working on a Flask / Vue.js web app that I want to have work well with both laptop and mobile browsers. The layout I've chosen is to have a series of mobile-screen-shaped areas that are oriented in a left-to-right fashion when viewed on a laptop browser. Currently when viewed on mobile those mobile-screen-sized areas get shifted into a top-to-bottom orientation, and the user can scroll the screen up and down to go through them all.

What I'd like to do is to have the mobile CSS instead simulate a mobile app by having those cards(?) oriented left-to-right (like the laptop view), and have a swipe shift each one into view or out of view, but always snapping to a single card at a time, rather than displaying 1/4th of the first card and 3/4ths of the second card (for example).

Current laptop browser view:

Desired mobile behavior:

I'm not understanding the Custom Event in Vuejs2.

I have a component named as user-navbar witch contains a dropdown menu, when change I execute this method:

handleCurrentServerChange: function(name, zoneid, currency_name) { /* Code omitted */ this.$emit('server-changed', { serverznid: zoneid }); },

Wich emit an event called server-changed and I want to listen to this event in another component accounts-linked.

<accounts-linked inline-template :server_data="server_data" @server-changed="handleServer">

When the event is emitted I should call the method handleServer. But isn't working. This is the method:

handleNewMessage: function(value) { alert(value); }

I got few errors

[Vue warn]: Property or method "handleServer" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. [Vue warn]: Invalid handler for event "server-changed": got undefined

What am I doing wrong?

I am creating a dynamic search bar that will filter a sidebar full of names based on user input. However, I am having trouble temporarily hiding and showing data based on the search bar's value on keyup. What is the best way to achieve this the "Vue way"?

On keyup, I want to filter through all of the this.people data and only show names that contain the value of the search input.

Below is what my code looks like

//Javascript Vue.component('sidebar',{ props: ['people', 'tables'], data: () => { return { fullName: '' } }, computed: { computed() { return [this.people, this.tables].join() } }, template: ` <div id="sidebarContain" v-if="this.people"> <input id="sidebar-search" type="text" placeholder="Search..." @keydown="searchQuery"> <select id="sidebar-select" @change="sidebarChanged"> <option value="AZ">A-Z</option> <option value="ZA">Z-A</option> <option value="notAtTable">No Table</option> <option value="Dean's Guest">Dean's Guest</option> <option value="BOO | VIP">BOO | VIP</option> </select> <div v-for="person in people" :class="[{'checked-in': isCheckedIn(person)}, 'person']" :id="person.id" :style="calcRegColor(person)"> <span v-if="person.table_name">{{person.first_name + ' ' + person.last_name + ' - ' + person.table_name}}</span> <span v-else>{{person.first_name + ' ' + person.last_name}}</span> </div> </div> `, methods: { isCheckedIn(person) { return person.reg_scan == null ? true : false; }, isHidden(person) { console.log("here"); }, calcRegColor(person) { switch(person.registration_type) { case "Dean's Guest" : return { color: 'purple' } break; case "BOO | VIP" : return { color: 'brown' } break; case "Student" : return { color: 'green' } break; case "Faculty": case "Staff": return { color: 'blue' } break; case "Alumni Club Leader": return { color: 'gold' } break; case "Table Guest" : return { color: 'pink' } break; default: return { color: 'black' } } } }, watch: { computed() { console.log("People and Tables Available"); } } }); //HTML <div id="app"> <sidebar :people="people" :tables="tables"></sidebar> </div>

I am playing around with this simple example trying to understand what attribute "for" does and can't seem to figure it out. I tried changing the value of "for" attribute and even removing it completely and it still works just fine (at least on the appearance). I would appreciate if someone can give me an explanation.

I just started to study Vue.js so this might be a very simple answer.

I can't find much information on the web with explanation on how to use multiple vuejs instances and make them work together.

Please, can someone show me his code style on how to do that?

I have a main /resources/assets/js/app.js:

Vue.component('google-maps', require('./components/Gmaps.vue')); export const App = window.App = new Vue({ el: '#app', mounted(){ // Listen for an event socket.on('alarm-channel:App\\Events\\AlarmCreated', ({data}) => { return this.alarmCreated(data.alarm); }); }, data: { users: [], alarms: [] // #01 - should be in Alarms.js }, methods: { /* Newly registered alarm */ alarmCreated(alarm){ this.alarms.push(alarm); // #01 - should be in Alarms.js } } });

How can I call a same new Vue() inside /resources/assets/js/alarms.js to make it work together ?: