Software

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.

Today Mozilla is announcing the launch of “Global Mission Partners: India”, an award program specifically focused on supporting open source and free software.  The new initiative builds on the existing “Mission Partners” program. Applicants based in India can apply for funding to support any open source/free software projects which significantly further Mozilla’s mission.

Our mission, as embodied in our Manifesto, is to ensure the Internet is a global public resource, open and accessible to all; an Internet that truly puts people first, where individuals can shape their own experience and are empowered, safe and independent.

We know that many other software projects around the world, and particularly in India, share the goals of a free and open Internet with us, and we want to use our resources to help and encourage others to work towards this end.

If you are based in India and you think your project qualifies, Mozilla encourages you to apply.  You can find the complete guidelines about this exciting award program on Mozilla’s wiki page.

The minimum award for a single application to the “Global Mission Partners: India” initiative is ₹1,25,000, and the maximum is ₹50,00,000.

The deadline for applications for the initial batch of “Global Mission Partners: India” is the last day of September 2017, at midnight Indian Time. Organizations can apply beginning today, in English or Hindi.

You can find a version of this post in Hindi here.

The post A ₹1 Crore Fund to Support Open Source Projects in India appeared first on The Mozilla Blog.

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/

I have a VueJs dynamically generated table made up with an array, which comes from a Laravel backend. This works fine.

I would like to manipulate the array (delete, add, change values, etc.) in the VueJS, send it back to Laravel, have it processed and refresh the page with the new array.

Since I am still learning, for now all I am trying to achieve is this: send the same array back to Laravel, return it back and have the page refreshed with "new" array.

What I have:

vue.js:

Vue.component('word', { props: ['word-list'], template: '#word-template', methods: { increment: function () { axios.post('/update',this.wordList); } }, }); new Vue({ el: '#root' });

HTML:

<div id="root"> <word :word-list="{{json_encode($commonWords) }}"></word> </div> <template id="word-template"> <table class="table"> <thead> <tr> <th>Key</th> <th>Value</th> <th></th> </tr> </thead> <tbody> <tr v-for="(value, key) in wordList" :wordList="wordList"> <td> @{{ key }} </td> <td> @{{ value }} </td> <td><button v-on:click="increment" class="button">Refresh</button></td> </tr> </tbody> </table> </template>

Laravel:

public function update() { $commonWords = request()->toArray(); return view('words.show', compact('commonWords')); }

What works: I am hitting the backend, it properly receives the array and sends it back. So the Laravel part works fine.

But how can I refresh the table with the new array?

I simply try to let VueJS 2 render a inline condition while I add a value to an dom element. I know, that it is possible to use v-if to let elements appear or disappear based on conditions, but how can I use a inline-condition?

I will give an example. The following html describe my idea and I know that this lines generates an error. Both <span> elements are controlled by conditions which lets them appear or not and this works fine.

Now, I try to bind a value to the href attribute depending on a condition (which are in the parentheses for example).

<div id="vuemain"> <span v-if="diced < 6">Looser</span> <span v-if="diced == 6">Winner</span> <a :href="'https://link-to-whatever.com/'+{diced==6 : 'winner', diced<6 : 'looser'} ">LINK</a> </div>

So after rendering by VueJS the <a> tag should be like:

<a href="https://link-to-whatever.com/winner"> <!-- If diced == 6 -->

OR

<a href="https://link-to-whatever.com/looser"> <!-- If diced < 6 -->

Do you understand what my problem is and is that somehow possible?

Many thanks in advance

Allan

I'm trying to populate an empty array with a declared array variable in a computed function. I tried this but with no luck:

data: { hashtags: [] }, computed: { filteredHashtags () { var defaultHashtags = [ '#hr', '#acc', '#sales' ]; var fHashtags = _.chain( messages ) .pluck( 'hashtags' ) .flatten() .map( function ( tag ) { return tag && tag.trim() ? '#' + tag : null; }) .filter( Boolean ) .value(); fHashtags = _.union( fHashtags, defaultHashtags ); return fHashtags = data.hashtags; } }

I am trying to learn Vue.JS, and the component I have made is not rendering on the page. This is my component:

import Vue from 'vue' const card = new Vue({ el: '#card', data: { title: 'Dinosaurs', content: '<strong>Dinosaurs</strong> are a diverse group of animals from the clade <em>Dinosauria</em> that first appeared at the Triassic period.' } })

This is my html:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue Practice</title> </head> <body> <div id="card"> <header>{{ title }}</header> <div v-html="content"></div> </div> <script src="bundle.js"></script> </body> </html>

And this is package.json (I realize most of the dependencies belong in devDependencies):

{ "name": "vue-practice", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "bundle": "browserify -t babelify -t vueify -e main.js > bundle.js", "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC", "dependencies": { "babel-plugin-transform-es2015-modules-commonjs": "^6.26.0", "babelify": "^7.3.0", "browserify": "^14.4.0", "vue": "^2.4.2", "vueify": "^9.4.1" }, "devDependencies": {} }

When I load index.html in the browser, all it renders is {{ title }} and I am receiving no errors. Any explanation as to why this is happening would be appreciated!

I have 2 dates in a component—validFrom and validUntil—and the validation is that validFrom is required, and validUntil is optional but if present must be after validFrom. I'm struggling to figure out how to set up Vuelidate validations to capture this. To complicate it further, some of these data elements might not be present, so I'm also using dynamic validations to only return data about the dates if the component has them. Here's a simplified version of the data and validations I've got so far:

data: () => ({ editedEventData: { name: '', signupData: { code: '', validFrom: null, validUntil: null } } }), validations: { editedEventData: { name: { required, minLength: minLength(1), maxLength: maxLength(20) } }, signupData: { code: { maxLength: maxLength(20) }, validFrom: { required }, validUntil: { isAfterFrom (value) { return date.getDateDiff(this.eventData.signupData.validFrom, value) < 0 } } } }

That kind of works when validUntil changes, but it doesn't update the validation when validFrom changes. I put a console.log() into the isAfterFrom() function, and I can see it is recomputed when validUntil is changed, but appears not to be dependent on validFrom. I guess simply accessing this.eventData.signupData.validFrom in the validation isn't enough. I also tried calling $v.editedEventData.signupData.validUntil.$touch() when validFrom is changed, but still nothing.

Is there some way to recompute that validation when another field changes?

How I can update a vuex store by commiting things from main proccess? for example:

In main thread:

import store from ../store ipc.on('someevent', (event, args) => { // do stuff with args store.commit('update-things') })

and in the renderer update components with these modifications.

Edit: Real code:

main.js

import store from '../store' const {ipcMain} = require('electron') const WebTorrent = require('webtorrent') const client = new WebTorrent() ipcMain.on('addMagnet', (event, arg) => { client.add(arg, function (torrent) { var files = [] torrent.files.forEach(function (file) { files.push({ title: file.name, torrent: torrent.infoHash, index: torrent.files.indexOf(file), duration: '--:--' }) }) store.commit('addSongs', files) })

and store mutation is like:

addSongs (state, newSongs) { newSongs.forEach(function (song) { state.songs.push(song) }) }

store is in diferent directory that main.js if it's helps.

I am new to javascript and Vue.js

I am making a POST API call in Vuejs using axios and my backend is in node.js. I am getting error in the authorisation. It works fine in postman

My POST API Call is as follows:

import Vue from 'vue' import router from '../router' import axios from 'axios' const API_URL = 'http://localhost:8000/api/' const LOGIN_URL = API_URL + 'login' export default { login(credentials, redirect) { console.log(LOGIN_URL) axios.post(LOGIN_URL,{ headers: { 'Authorization': 'Basic YWtzaGF5OmFrc2hheQ==', 'Content-Type': 'application/json', 'Accept': 'application/json' }, data: { 'email': credentials.email, 'password': credentials.password } }).then(response => { console.log(response.data) router.push(redirect) }).catch(e => { console.log(e); }) } }

When I make the api request my javascript console shows

Failed to load resource: the server responded with a status of 500(Internal Server Error)

and my server console shows error

TypeError: Cannot read property 'username' of undefined

here username is username in basic authorization.