Vuejs

I have the following setup:

1. Vue PWA starter
2. Vuex store
3. Persist plugin to have data available offline

The sw registers properly and also loads the cached files containing my vue app when offline. The problem: The data that's stored in the localStorage doesn't show up, although it is available in the localStorage.

In Chrome's Application tab I see the error An unknown error occured when fetching the script. There's no assigned line of code from the worker or anything else.

So right now I don't know whether the problem is my worker, the plugin or something else. Are there any good approaches to tackle such 'magic' problems?

BTW: I left the service worker as is from the Vue PWA starter.

Store initialisation if it helps:

const localStorageConfig = new VuexPersistence({ key: 'someAppCode', }); export default new Vuex.Store({ modules: { user, client, tours, }, plugins: [localStorageConfig.plugin], });

I am trying to create an 'add friend' button like facebook. When click this 'add friend' button it changes to 'friend request sent' button. I have tried following approach which doesn't work:

html:

<div v-for="(friend, index) in friends"> <div v-if="friend.sentRequest"> <button class='disabled'>Friend request sent</button> </div> <div v-else> <button @click="addFriend(friend)">Add friend</button> </div> </div>

script:

<script> export default { data() { return { friends: [], } }, methods: { addFriend(friend) { friend.sentRequest = true; } } } </script>

I need help to fix this. Thanks in advance.

I have bound an array events to a component tag <scheduler> containing events to fill in a scheduler app (dhtmlx scheduler). However, the DOM doesn't seeem to refresh itself when data is retrieved by the getEvents methods triggered when vue instance is created.

There is 2 vue files I work with: App.vue containing the main app component and the Scheduler.vue file containing the scheduler component.

The thing is that when I modify something in the Scheduler.vue file and save it, it correctly take the updated events array into account. Scheduler parse the data in the events prop when DOM is mounted in scheduler component.

Therefore is there something I can do to get the updated array ?

Here is the App.vue:

<template> <div id="app"> <div class="container"> <scheduler v-bind:events="events"></scheduler> </div> </div> </template> <script> import Scheduler from './components/Scheduler.vue'; import auth from './components/auth/index' import data from './components/data/index' export default { name: 'app', components: { Scheduler }, data() { return { eventsArr: [], events: this.eventsArr } }, created() { this.getEvents(); }, watch: { eventsArr: function(value) { console.log('updated'); } }, methods: { async getEvents() { try { const token = await auth.getToken(this); const thattoken = await auth.getThatToken(this, token); await data.getOgustData(this, token, '/calendar/events', 307310564, this.eventsArr); // return this.events; } catch (e) { console.log(e); } }, } } </script>

Here is Scheduler.vue:

<template lang="html"> <div ref="scheduler_here" class="dhx_cal_container" style='width:100%; height:700px;'> <div class="dhx_cal_navline"> <div class="dhx_cal_prev_button">&nbsp;</div> <div class="dhx_cal_next_button">&nbsp;</div> <div class="dhx_cal_today_button"></div> <div class="dhx_cal_date"></div> <div class="dhx_cal_tab" name="day_tab" style="right:204px;"></div> <div class="dhx_cal_tab" name="week_tab" style="right:140px;"></div> <div class="dhx_cal_tab" name="month_tab" style="right:76px;"></div> </div> <div class="dhx_cal_header"></div> <div class="dhx_cal_data"></div> </div> </template> <script> import 'dhtmlx-scheduler' import 'dhtmlx-scheduler/codebase/locale/locale_fr'; import 'dhtmlx-scheduler/codebase/ext/dhtmlxscheduler_readonly.js'; export default { name: 'scheduler', props: { eventsArr: { type: Array, default () { return [{ id: '', text: '', start_date: '', end_date: '', }] } }, events: [] }, mounted() { scheduler.config.xml_date = '%Y-%m-%d %H:%i'; // disable left buttons on lightbox scheduler.config.buttons_left = []; // enable cancel button on lightbox's right wing scheduler.config.buttons_right = ['dhx_cancel_btn']; // changing cancel button label scheduler.locale.labels['icon_cancel'] = 'Fermer'; // hide lightbox in month view scheduler.config.readonly_form = true; // hide select bar in day and week views scheduler.config.select = false; scheduler.config.lightbox.sections = [ { name: "description", height: 20, map_to: "text", type: "textarea", focus: true } ]; scheduler.init(this.$refs.scheduler_here, new Date(), 'month'); scheduler.parse(this.$props.events, 'json'); }, } </script> <style lang="css" scoped> @import "~dhtmlx-scheduler/codebase/dhtmlxscheduler.css"; </style>

I have navbar in laravel (+vue.js) as a blade.php. I want to have in this navbar variable like {{xyz}} and when I am going on another page I can set text in Vue.js or something like this. Can you help me?

i'am trying to passing param to nuxt-link (router-link vue) but it seems doesnt work. this is my snippet and folder structure

<nuxt-link :to="{path: '/post-detail', params: { id:idPost } }"> {{title}} </nuxt-link>

and this is the screenshot when i try to hovering a link

but when i using query its working

<nuxt-link :to="{path: '/post-detail', query: { id:idPost } }"> {{title}} </nuxt-link>

i just prefer to use param => /post-detail/1 .. can anyone solve this :(

Why does Nuxt call the server for so many times on a single route/ page?

Below is the example I tested from their express-template:

import express from 'express' import { Nuxt, Builder } from 'nuxt' import api from './api' const app = express() const host = process.env.HOST || '127.0.0.1' const port = process.env.PORT || 3000 app.set('port', port) app.use(function(req, res, next) { console.log(res.headersSent) // <-- pay attention here next() }) // Import API Routes app.use('/api', api) // Import and Set Nuxt.js options let config = require('../nuxt.config.js') config.dev = !(process.env.NODE_ENV === 'production') // Init Nuxt.js const nuxt = new Nuxt(config) // Build only in dev mode if (config.dev) { const builder = new Builder(nuxt) builder.build() } // Give nuxt middleware to express app.use(nuxt.render) // Listen the server app.listen(port, host) console.log('Server listening on ' + host + ':' + port) // eslint-disable-line no-console

This route/page/index.vue will call the api/users:

import axios from '~/plugins/axios' export default { async asyncData () { let { data } = await axios.get('/api/users') return { users: data } }, head () { return { title: 'Users' } } }

I added a console.log in plugins/axios.js:

import * as axios from 'axios' let options = {} // The server-side needs a full url to works if (process.server) { options.baseURL = `http://${process.env.HOST || 'localhost'}:${process.env.PORT || 3000}` console.log('express:' + options.baseURL) } export default axios.create(options)

When I run the app and access it on my browser at http://127.0.0.1:3000/:

In my terminal I get:

false express:http://localhost:3000 false false false false false false false false

As you can see that it has called api/users 8 times more after the first call.

Is it a bug in Nuxt?

If I removed app.use(nuxt.render) from server/index.js:

// Give nuxt middleware to express // app.use(nuxt.render)

And I access it at http://127.0.0.1:3000/ or http://127.0.0.1:3000/api/users, I get:

false

Just one call which is correct.

So, what is going on with Nuxt?

I am learning vuejs and I can't understand why this name is needed.

<template> </template> <script> export default { name: 'NotFound' } </script> <style> </style>

For example, you can see the source of the above code in this file https://github.com/misterGF/CoPilot/blob/master/src/components/404.vue the name does nothing but why do we need it.

I have several buttons on a page which are hooked to the same method webcamSendRequestButton

<button v-on:click="webcamSendRequestButton" value="0" type="button" class="webcam-send-request-button" :disabled="disabled">Verify</button> <button v-on:click="webcamSendRequestButton" value="1" type="button" class="webcam-send-request-button" :disabled="disabled">Verify</button> <button v-on:click="webcamSendRequestButton" value="2" type="button" class="webcam-send-request-button" :disabled="disabled">Verify</button> <button v-on:click="webcamSendRequestButton" value="3" type="button" class="webcam-send-request-button" :disabled="disabled">Verify</button>

and I am making an ajax call when the button is clicked. In jquery or JS it is pretty straightforward to get the value of button when clicked using $(this).val();

How do I fetch the value of the button when it is clicked in vue?

var app = new Vue({ el: '#my-div', methods: { webcamSendRequestButton: function() { const buttonValue = ??? // How do I fetch the value over here $.ajax({ url: "someurl", type: "POST", data: { value: buttonValue }, success: function (data) { // Omitted for brevity } }); } } });

I have successfully installed a vuetifyjs template using the command

vue init vuetifyjs/webpack-advanced

it was successfully installed but when I tried to use the command npm run dev I had the following error message:

C:\Users\Muse\Documents\vuetify>npm run dev

vuetify@1.0.0 dev C:\Users\Muse\Documents\vuetify

node build/dev-server.js

fs.js:1657 binding.lstat(baseLong);

^

Error: ENOENT: no such file or directory, lstat 'C:\Users\Muse\Documents\vuetify\test' at Object.realpathSync (fs.js:1657:15) at resolve (C:\Users\Muse\Documents\vuetify\build\webpack.base.conf.js:8:13) at Object. (C:\Users\Muse\Documents\vuetify\build\webpack.base.conf.js:35:35) at Module._compile (module.js:573:30) at Object.Module._extensions..js (module.js:584:10) at Module.load (module.js:507:32) at tryModuleLoad (module.js:470:12) at Function.Module._load (module.js:462:3) at Module.require (module.js:517:17) at require (internal/module.js:11:18) npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! vuetify@1.0.0 dev: node build/dev-server.js npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the vuetify@1.0.0 dev script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\Muse\AppData\Roaming\npm-cache_logs\2017-08-31T09_19_06_701Z-debug.log

I am building a dynamic table on my front end side, and at the end i need to know what was inserted on each cell of my table since it is editable, so i did this on my html:

<table class="table table-responsive"> <tbody> <tr v-for="(row,idx1) in tableRows" :class="{headerRowDefault: checkHeader(idx1)}"> <td class="table-success" v-for="(col,idx2) in tableCols"><input v-model="items[idx1][idx2]" type="text" class="borderTbl" value="HEY"/></td> </tr> </tbody> </table>

as you guys can see. i set inside the input a v-model with items[idx1][idx2] so i can pass the value to that line and columns, it is not working like this, i don't know how to set it.

This is my javascript:

export default { name: 'app', data () { return { table: { rows: 1, cols: 1, key: 'Table', tableStyle: 1, caption: '', colx: [] }, hasHeader: true, hasCaption: true, insert: 1, idx2: 1, items: [] } },

computed: {

tableStyles () { return this.$store.getters.getTableStyles }, tableRows () { return parseInt(this.table.rows) }, tableCols () { return parseInt(this.table.cols) }

expected items array:

items:[ ["john","Micheal"] ["john","Micheal"] ["john","Micheal"] ["john","Micheal"] ]

I have the following Popper.js popup in which I have a button on which I want to attach a Vue.js click event.

However, while the click event works outside the popup, it doesn't work instead the popup.

How can I get changeText() to work inside the popup as well?

https://jsfiddle.net/edwardtanguay/jxs5nmxs

HTML: <div id="app"> <div> Message: {{message}} </div> <div> <button @click="changeText()">outside works</button> </div> <hr/> <a href="#" id="example" class="btn btn-primary" rel="popover" data-original-title="Test Form" data-content=' <div class="form-group"> <label for="exampleInputPassword1">Name</label> <input type="text" class="form-control"> </div> <button @click="changeText()" class="btn btn-success">Submit</button> '>Fill out form</a> </div> JavaScript: var vm = new Vue({ el: '#app', data: function() { return { message: 'hello' } }, methods: { changeText: function() { alert('test'); } } }); $(function () { $('#example').popover({html: true}); });

I have countries and cities jsons that comes from backend. And I want to make in the vuejs when I select a country in the cities select to have the cities from that country.

I got stuck here and I have no idea how to bring the cities only for that country that is selected.

Can someone please give me a little help?

Countries JSON

GET /languages/countries (list of countries)

{ "errorCode": 0, "errorMessage": null, "contries": [ { "errorCode": 0, "errorMessage": null, "rid": "1", "sortname": "AF", "name": "Afghanistan", "phonecode": 93, "links": [] }, { "errorCode": 0, "errorMessage": null, "rid": "2", "sortname": "AL", "name": "Albania", "phonecode": 355, "links": [] }, { "errorCode": 0, "errorMessage": null, "rid": "3", "sortname": "DZ", "name": "Algeria", "phonecode": 213, "links": [] } ], "links": [] }

Cities JSON

GET /languages/countries/1 (list of cities for country with id =1)

{ "errorCode": 0, "errorMessage": null, "cities": [ { "errorCode": 0, "errorMessage": null, "rid": "33129", "name": "Abrud", "stateId": 2934, "links": [] }, { "errorCode": 0, "errorMessage": null, "rid": "33130", "name": "Aiud", "stateId": 2934, "links": [] }, { "errorCode": 0, "errorMessage": null, "rid": "33131", "name": "Alba Iulia", "stateId": 2934, "links": [] } ], "links": [] }

VueJS script

export default { data() { return { users: {}, countries: {}, cities: {} } }, created() { this.getUsers(); this.getCountries(); this.getCities(); }, methods: { getUsers() { this.$http.get("/user") .then((response) => { this.users = response.data.users; }) }, getCountries() { this.$http.get("/languages/countries") .then((response) => { this.countries = response.data.contries; }) }, getCities() { this.$http.get("/languages/countries/"+this.country.rid) .then((response) => { this.cities = response.data.cities; }) }, }, components: { appMenu: Menu } }

HTML Selects

<div class="form-group"> <div class="row"> <div class="col-6 pz-rel"> <label class="eda-form-label" for="country">COUNTRY</label> <select class="eda-form-input"> <option v-for="country in countries" :value="country.name">{{country.name}}</option> </select> <i class="ti-angle-down icons-for-select"></i> </div> <div class="col-6 pz-rel"> <label class="eda-form-label" for="city">CITY</label> <select class="eda-form-input"> <option v-for="city in cities" :value="city.name">{{city.name}}</option> </select> <i class="ti-angle-down icons-for-select"></i> </div> </div> </div>

I'm having this problem where i cant use next('/login'). This is my code:

*/ all imports that are needed Vue.use(Router); const routes = [ {path: '/', component: Home}, {path: '/admin', component: Admin}, {path: '/login', component: Login}] var route = new Router({ routes: routes, mode: 'history' }); route.beforeEach((to, from , next) => { console.log(to.fullPath) next('/login'); }); new Vue({ el: '#app', router: route, template: '<App/>', components: { App } })

It works when i only use next() but when i give the next() function a route it's stuck within an infinite loop

console screenshot

I have a Personnel table bound to an array of objects that is coming from VueJs. The last column on the table is a button for editing each record.

I'd like to show a modal popup when the edit button is clicked and bind the textboxes to the properties of the personnel that I want to edit. It should update the table and the source of the data when the save button on the modal popup is clicked.

But I am stuck on passing the object or even just the key to the component so I can load the data or bind the edited object into my textboxes.

JS

var app = new Vue({ el: '#my-app', data: { personnels: [ { id: 1, firstName: 'Billy', lastName: 'Bob', email: 'bb@kewl.com' }, { id: 2, firstName: 'Mike', lastName: 'Coilers', email: 'mco@kewl.com' }, { id: 3, firstName: 'Fred', lastName: 'Just', email: 'freju@gmail.com' }, { id: 4, firstName: 'Tori', lastName: 'Drury', email: 'smstua@gmail.com' } ] }, methods: { showPersonnelEditor: function () { // how do i pass data to the personnelEditor component? } } }); Vue.component('personnel-editor', { prop: ['personnel'] });

HTML

<div id="my-app"> <table classs="table" width="100%"> <tr> <th> Id </th> <th> First Name </th> <th> Last Name </th> <th> Email </th> <th> Actions </th> </tr> <tr v-for="personnel in personnels"> <td> {{ personnel.id }} </td> <td> {{ personnel.firstName }} </td> <td> {{ personnel.lastName }} </td> <td> {{ personnel.email }} </td> <td> <button v-on:click="showPersonnelEditor">Edit</button> </td> </tr> </table> <personnel-editor inline-template><div class="modal fade" > <div class="modal-dialog"> <div class="modal-header"> header </div> <div class="modal-content"> <div class="form-group row"> <div class="col-lg-12"> <label>Id</label> <input type="text" v-model="personnel.Id" /> </div> <div class="form-group row"> <div class="col-lg-12"> <label>First Name</label> <input type="text" v-model="personnel.firstName" /> </div> </div> </div> <div class="form-group row"> <div class="col-lg-12"> <label>Last Name</label> <input type="text" v-model="personnel.lastName" /> </div> </div> <div class="form-group row"> <div class="col-lg-12"> <label>Email</label> <input type="text" v-model="personnel.Email" /> </div> </div> </div> <div class="modal-footer"> oh mah foot </div> </div> </div> </div></personnel-editor>

I am building a hotel booking application and now i am working with booking part, Here i am giving an option for the user to edit the preferred room type and the number of adults, number of children using select box. In clear, say if the user selected the room type as standard room and one adult and no children, then we can get the default price value that was already stored in that particular room. I have attached the fiddle upto the this step and the fiddle link was https://jsfiddle.net/c1ud4mkv/. I am in the need of help after this only if the user needs to stay with 2 adults and 1 or two children then the price needs to changed accordingly. (ie.) The price as of now for standard room type with 1 adult was Rs.1000, If the user wants to add extra 1 adult means the price needs to change to Rs.2000, And if the user needs to add 1 children along with 2 adults means the price needs to be calculated as Rs.3000 (Rs.2000 + Rs.1000) (Rs.1000 is price for extra 1 child). I am unable to find solution for doing this, kindly make a help for me..

The HTML code is:

<div id="app"> <table> <thead> <td>Room Type</td> <td>Adult</td> <td>Children</td> <td>Total Price</td> </thead> <tbody> <tr v-for="(row, index) in rows"> <td> <select data-value="Room Type"> <option v-for="room in rooms">{{room.title}}</option> </select> </td> <td> <select data-value="1 Adult"> <option value="1">1 Adult</option> <option value="2">2 Adults</option> </select> </td> <td> <select data-value="No Child"> <option value="1">No Child</option> <option value="2">1 Child</option> <option value="3">2 Children</option> </select> </td> <td v-for="item in items"> {{item.price}} </td> </tr> </tbody> </table> <div class="add-remove"> <div class="col-md-6 text-center add"> <a @click="addRoom" class="add-room"> Add Room </a> </div> <div class="col-md-6 text-center remove"> <a @click="removeRoom(index)" class="remove-room"> Remove Room </a> </div> </div> </div>

And the script was:

new Vue({ el: '#app', data: { rows: [], rooms: [ { value:0, title: 'Standard Room' }, { value:0, title: 'Deluxe Room' }, ], items: [{ price: 1000, }] }, methods: { addRoom: function() { var elem = document.createElement('tr'); this.rows.push({ }); }, removeRoom: function(index) { this.rows.splice(index, 1); }, } })

And jsfiddle link was https://jsfiddle.net/c1ud4mkv/

Hi I want to access msg inside my template how can achieve this in vuejs? my webpack watcher is having an error " - text "{{msg}}" outside root element will be ignored."

<template> {{msg}} <form action="post" enctype="multipart/form-data" v-on:submit.prevent="addPension"> <button type="submit" class="btn btn-success">submit </button> </form> </template> <script> export default { data: () => ({ msg : 'new messages' }), created() { } }

I have working code in VueJS however need a certain block to run sequentially:

return Promise.all(this.vm.multipleActions.run.map(function (testRun) { return self.initiateTest(testRun); }))

Currently it seems this runs in parallel - so in initiateTest() I insert records into a DB however parallel gets me random ordering instead of the testRuns in order (which I'd like to preserve).

I can observe the AJAX calls in initiateTest() made randomly due to the parallel nature.

I deployed my Vue.js SPA app with Google Cloud's Storage Bucket.

Google's balancer does not let me configure the redirection from HTTPS to HTTP. The .htaccess file is not acknowledged either (at least, as per other StackOverflow questions I stumbled upon).

How do I enforce the redirection from HTTP to HTTPS in the context of GCP's storage bucket?

I was thinking about modifying the Router itself in my application, but

• it's a dirty hack;
• leads to unnecessary extra call;
• technically does not seem to be solvable -- routes are expressed as relative to domain root anyway (i.e. i don't have the schema+domain information to use for programmatic redirect, as in /, /resume, /manifesto)...

I have a table with an edit button and an edit form dialog:

<v-data-table v-bind:headers="headers" v-bind:items="packets" v-bind:search="search" > <template slot="items" scope="props"> <td> {{ props.item.name }} </td> <td class="text-xs-right">{{ props.item.folder }}</td> <td class="text-xs-right"> <EditPacketDialog></EditPacketDialog> <!-- #### NEED TO PASS IN PROPS DATA. HOW? --> </td> </template> <template slot="pageText" scope="{ pageStart, pageStop }"> From {{ pageStart }} to {{ pageStop }} </template> </v-data-table>

And a form I'd like to show when I click the edit button on my table:

<template> <v-layout right row > <v-dialog v-model="dialog" width="50%"> <v-btn outline small fab slot="activator" class="indigo--text" @click="editPacket"> <v-icon>edit</v-icon> </v-btn> <v-card> <v-card-title> <span class="headline">Edit Packet</span> </v-card-title> <v-card-text> <v-text-field label="Name" required></v-text-field><!-- #### SET THE FIELD --> <v-select label="Documents" multiple autocomplete chips :items="['WorkTime', 'Firm & Branch Financials', '2017 Firm Financial Letter', 'Systems Ideas', 'MyFirstDocument']" ></v-select> <small>*indicates required field</small> </v-card-text> <v-card-actions> <v-spacer></v-spacer> <v-btn class="blue--text darken-1" flat @click.native="dialog = false">Close</v-btn> <v-btn class="blue--text darken-1" flat @click.native="dialog = false">Save</v-btn> </v-card-actions> </v-card> </v-dialog> </v-layout> </template> <script> export default { data () { return { dialog: false } } } </script>

Since the dialog ( form ) was so large, I wanted to separate it out from the table code, however, I am not sure how to pass the props.item.name and props.item.folder into the child component. What is the correct way to identify the row/data I'd like to edit?

I am working with vue-form-wizard plugin by https://github.com/cristijora/vue-form-wizard but I am having trouble with v-for, when I set the attribute "prop" with the "option" It validates all the radio inputs but is not validating correctly.

I figured out that I need to set the prop attr like prop="test.option" where test is my array, but since it is a loop the array name is on the key but I am not able to do this with vue prop="key.option"

<div id="app">

<div v-for="(gu, key, index) in formInline" data-row-span="6"> <el-form-item label="Approved by" prop="radio" :rules="rules.xx.radio2"> <el-radio-group v-model="gu.radio"> <el-radio :label="'3'">optionA</el-radio> <el-radio :label="'6'">optionB</el-radio> </el-radio-group> </el-form-item> </div> </el-form> </tab-content> <el-button type="primary" slot="prev">Back</el-button> <el-button type="primary" slot="next">Next</el-button> <el-button type="primary" slot="finish">Finish</el-button> </form-wizard>

https://jsfiddle.net/bt5dhqtf/900/