Software

I am doing an application with laravel and vue js. To run the application in local host i tried the following but it is throwing error,

Unable to open browser. If you are running in a headless environment, please do not use the open flag

I have installed npm using npm install, then i gave the command npm run dev then the above error was displaying..

The package.json code is,

{ "private": true, "scripts": { "dev": "npm run development", "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", "watch-poll": "npm run watch -- --watch-poll", "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js", "prod": "npm run production", "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js" }, "devDependencies": { "axios": "^0.15.3", "bootstrap-sass": "^3.3.7", "cross-env": "^3.2.3", "jquery": "^3.1.1", "laravel-mix": "0.*", "lodash": "^4.17.4", "vue": "^2.1.10" } }

I am using Typescript with Vuejs to build an application. I have several stand alone components (.vue) files that I am importing into a Typescript (.ts) file. In the Typescript file, I am importing Vue from the npm Vue library and then creating a new Vue to display my components. The error that I am seeing is:

Property x does not exist on type 'Vue'

My build system is Webpack with tsc. Why am I getting this error and how can I resolve it?

main.ts import Vue from 'vue'; import Competency from '../components/competency.vue'; new Vue({ el: "#app", components: { 'competency': Competency }, data:{ count: 0 }, methods:{ initialize: function(){ this.count = count + 1; // Errors here with Property count does not exist on type vue } } }) tsconfig { "compilerOptions": { // "allowJs": true, "allowSyntheticDefaultImports": true, "experimentalDecorators": true, "lib": [ "es2015", "dom", "es2015.promise" ], "module": "es2015", "moduleResolution": "node", "noEmitOnError": true, "noImplicitAny": false, //"outDir": "./build/", "removeComments": false, "sourceMap": true, "target": "es5" }, "exclude": [ "./node_modules", "wwwroot", "./Model" ], "include": [ "./CCSEQ", "./WebResources" ] } webpack.config.js const path = require('path'); const webpack = require('webpack'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const CleanWebpackPlugin = require('clean-webpack-plugin'); module.exports = { entry: { Evaluations: './WebResources/js/main.ts' }, devServer: { contentBase: './dist' }, module: { rules: [{ test: /\.ts$/, exclude: /node_modules|vue\/src/, loader: 'ts-loader', exclude: /node_modules/, options: { appendTsSuffixTo: [/\.vue$/] } }, { test: /\.vue$/, loader: 'vue-loader', options: { esModule: true } }, { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] }, { test: /\.(png|svg|jpg|gif)$/, use: [ 'file-loader' ] }, ] }, resolve: { extensions: [".tsx", ".ts", ".js"], alias: { 'vue$': 'vue/dist/vue.esm.js' } }, plugins: [ new CleanWebpackPlugin(['dist']), new HtmlWebpackPlugin({ filename: 'Evaluations.html', template: './WebResources/html/Evaluations.html' }), new HtmlWebpackPlugin({ filename: 'ExpenseUpload.html', template: './WebResources/html/ExpenseUpload.html' }), new webpack.optimize.CommonsChunkPlugin({ name: 'WebAPI' }) ], output: { filename: '[name].bundle.js', path: path.resolve(__dirname, 'dist') } }

please find vuejs code below. When i access the url directly on the browser, the data(JSON) are retrieved but when retrieving the data by the http request, the data are not stored in the variable. I am using Vuejs and Laravel. Can someone tell me what is wrong with the code. Thank you.

<script> Vue.component('account-type-list', { template: `<div></div>` data:() => { return { typesofaccount:[] }; }, created: function() { this.getAccountTypes(); }, methods: { getAccountTypes: function() { this.$http.get('/list/accounttypes').then(response => { this.typesofaccount = response.body }); }, } }); Vue.component('type', { template: '<a class="active item"><slot></slot></a>' }); new Vue({ el: '#root', }); </script>

I am trying to get a single object using the .child() method however it returns with a .key and .value array of objects instead of giving me 1 object with all the keys and values. For example:

Here it is giving me an array of objects. However, if I use a query I will get an array of 1 objects that will return data like this:

How can I get a single value in the form of the second picture?

Here is the code:

let app = Firebase.initializeApp(config) let db = app.database() export default { name: 'hello', firebase: { businesses: db.ref().child('3021') // businesses: bdRef.orderByChild('title').equalTo('Feather Animation Wood Carving Supplies') // Code for the bottom picture }, components: { 'card': Card } }

I have an app in vue.js with vuex that implement some modules, what I'm doing is concatenating objects to get some actions, getters, mutations. Like this:

const files = require.context('../../renderer/', true, /\?*.actions.js|.\?*.getters.js|.\?*.mutations.js$/); const modulesSrc = {}; files.keys().forEach((key) => { modulesSrc[key.replace(/(\.*\/|\.js)/g, '')] = files(key).default; }); export default modulesSrc;

What I get is it:

When I try to change the regex to work by getting only the name of the folder, it goes like this:

const files = require.context('../../renderer/', true, /\?*.actions.js|.\?*.getters.js|.\?*.mutations.js$/); const modulesSrc = {}; files.keys().forEach((key) => { modulesSrc[key.replace(/(\.*\/|\.js|actions?|getters?|mutations)/g, '')] = files(key).default; }); export default modulesSrc;

But inside the element, it only gets the last file, and do not concat it with the others.

What can I do ?

Thanks!

I have a local Node.js server running on port 3000. I have another dev server for front end using webpack, running on 8080. Node is connected to MySQL server. My project structure looks like this:-

SampleProject -> BackEnd -> FrontEnd

I have used webpack-dev-server proxy option to proxy requests from webpack-dev-server (8080) to Node (3000).

The dev server configuration my webpack.config.js looks like this:-

devServer: { proxy: { '/api': { target: 'http://localhost:3000' } }, historyApiFallback: true, noInfo: true }

I have written a Node api in services.js

exports.getAllPatientData = function(req, res) { con.connection.query("SELECT fname, lname, city, country_code, TIMESTAMPDIFF(YEAR, DOB, CURDATE()) AS age FROM sbds_patient_data where pid = 1", function(err, result, fields) { if (err) { throw err; res.json({ status: "error", message: "An error has occurred. Please try again later" }); } console.log(result); res.json({ status: "success", results: result }); });}

And in app.js i call the service like this

app.get('/profile', services.getAllPatientData);

In my Vue component file I call the api like this:-

import axios from 'axios'; export default{ data(){ return{ firstName: '', lastName: '', age: '', errors: [] } }, created: function(){ this.getPatientInfo(); }, methods:{ // Function to get the patient's personal information getPatientInfo: function(){ axios.get('http://localhost:3000/profile') .then(response =>{ this.firstName = response.data; this.lastName = response.data; this.age = response.data; }) .catch(e => { this.errors.push(e); }) } } }

Both the servers are now running. When I open localhost:8080/profile, I see the entire json object on the screen like this,

The browser console does not show any object. But my network says localhost:3000/profile. What wrong am I doing here? How can I rectify this issue and get the data?

I'm in the process of moving the build process of a vue.js app from gulp/browserify/vueify to webpack with vue-loader.

If I have modules: false in my .babelrc, I get an error on page load: Uncaught TypeError: Cannot assign to read only property 'exports' of object

If I remove modules: false, the errors I get are along the lines of Vue.use is not a function. This can be fixed by changing the way I import libraries from:

var Vue = require('vue');

to

var Vue = require('vue').default; So my question is:

Do I have to know ahead of time whether or not a library uses import/export default or require/module.exports? Or does webpack take care of that and I assume I can use import/export instead of require/module.exports across the board?

I have a component triggered with v-on:click="someMethod".

How would I get the mouse coordinates (X, Y) of this click?

Additional information: HTML5 Canvas component

Is there any way to model g_recaptcha_response in Vue Form?

<input id="email" v-model="form.email" type="email" class="form-control"> <div class="g-recaptcha" data-sitekey="{{ env('GOOGLE_RECAPTCHA_KEY') }}"></div>

just like v-model="form.email" can we do v-model="form.g_recaptcha_response"?

new Vue({ el: '#app', data: { form: new Form({ email: '', g_recaptcha_response: '' }), } });

Form snippet is here https://github.com/laracasts/Vue-Forms/blob/master/public/js/app.js

What will be the better approach to integrate Google reCaptcha in Vue?

So i'm learning Vue.js and found this fiddle that does exactly what i want to do.

Here is the fiddle: https://jsfiddle.net/os7hp1cy/48/

So i integrated this only to get this error:

• invalid expression: v-for="user in users | filterBy searchKey | paginate"

So i've done some digging and I see it has changed from version 1 to 2. However, i dont know how to fix this.

<li v-for="user in users | filterBy searchKey | paginate">{{ user.name }}</li>

I would like to replace this with something that vue2 will support and will work the same way.

Thanks!

I have two objects in my root - obj and newObj. I watch changes on my obj object with deep: true, and on changes I update newObj accordingly.

In my vue debugger, the newObj seems updated as expected, however the component doesn't perform the for loop count. Or if I try to {{ newObj }}, it logs only the first update.

I tried to re-create the issue on this Fiddle.

my html:

<div id="app"> <button @click="appendTo">Append</button> <my-comp v-bind:new-obj="newObj"></my-comp> </div>

and vue:

new Vue({ el: '#app', data: { obj: {}, newObj: {} }, methods: { appendTo() { if (typeof this.obj[1] === 'undefined') { this.$set(this.obj, 1, {}) } var randLetter = String.fromCharCode(Math.floor(Math.random() * (122 - 97)) + 97); this.$set(this.obj[1], randLetter, [ [] ]) } }, watch: { obj: { handler(obj) { var oldKeys = Object.keys(obj) var newKeys = Object.keys(this.newObj); var removedIndex = newKeys.filter(x => oldKeys.indexOf(x) < 0 ); for (var i = 0, len = removedIndex.length; i < len; i++) { delete this.newObj[removedIndex[i]] } oldKeys.map((key) => { if (this.newObj.hasOwnProperty(key)) { var newInnerKeys = Object.keys(this.newObj[key]); var oldInnerKeys = Object.keys(obj[key]); var additions = oldInnerKeys.filter(x => newInnerKeys.indexOf(x) < 0); for (var i = 0, len = additions.length; i < len; i++) { // here this.$set(this.newObj[key], additions[i], [ [] ]); } var deletions = newInnerKeys.filter(x => oldInnerKeys.indexOf(x) < 0); for (var i = 0, len = deletions.length; i < len; i++) { delete this.newObj[key][deletions[i]] } } else { this.newObj[key] = {} for (var innerKey in obj[key]) { this.$set(this.newObj, key, { [innerKey]: [ [] ] }); } } console.log(obj); console.log(this.newObj) }); }, deep: true } } }) Vue.component('my-comp', { props: ['newObj'], template: ` <div> <div v-for="item in newObj"> test </div> </div> ` })

Could you explain me how to access assets from webpacker gem within vue.js components? For example - how to create div with background image. I've tried use both sprockets assets and putting image files to /app/javascripts/assets folder but images is only available in template section, but not in style section :( could you show me code example?

I am working with vue-sortable and dragable and at the moment i can drag a item above and change its position, but my json doesn't get refreshed, so i have this list:

<draggable v-model="this.$store.getters.getDocument.getDocumentAttributes"> <div class="panel panel-primary" v-for="(value, key, index) in this.$store.getters.getDocumentAttributes"> <div class="panel-body quote"> <span @click="removeSection(index,key)" class="pull-right glyphicon glyphicon-remove text-info"></span> <p>{{value.key}}</p> </div> </div> </draggable>

i get the list from vuex store, i can swap the elements but the json doesn't refresh, how can i do it?

Thank you!

Here is the template I have :

<draggable element="ul" :options="{group:'track'}" :list="jsonObject.tracks" :move="onMove" @end="onMoveTrackFinished"> [..................] </draggable>

the onMove and onMoveTrackFinished are defined like so :

onMove ({relatedContext, draggedContext}) { console.log("onMove"); return true; }, onMoveTrackFinished() { console.log("finished move"); return true; }

I can drag the items of the draggable, but they are not dropping where I want them to be : they just go back to were there were before...

I am using VuexFire in an app and as in https://github.com/posva/vuexfire in my components I have lines like

computed: Vuex.mapGetters(['todos']), created() { this.$store.dispatch('setTodosRef', todosRef) },

This works fine except when I also have some computed methods in which case I don't know what to do. I have tried things like:

computed: Vuex.mapGetters(['todos']), computed() { amethod: { return 1 } }, created() { this.$store.dispatch('setTodosRef', todosRef) },

and

computed() { amethod: { return 1 } }, created() { ...Vuex.mapGetters(['todos']) this.$store.dispatch('setTodosRef', todosRef) },

but these, and the other things that I have tried, are clearly misguided because they don't work (i.e. the data from firebase is not available to the method.

What's the correct approach?

I have a vuejs component in a html that is returned from jquery ajax call but it doesn't render the component. so how to make vuejs render this component from jquery?

<test-component></test-component>

that is what the ajax call returns and its displayed like this without rendering it.

I am using VueJS 2 to build a drag-and-drop layout builder. One of the requirements of that project is to be able to have some components that will allow for custom content to live inside (they will be just a wrapper around that content). And to be really concrete, I am trying to pass in and render another drag-and-drop zone which is implemented in a draggable component.

Basically, I want to pass a VueJS template to the component via a prop and have that template rendered inside of the component. This is necessary because I do not want the UI to limit the needs of the developer and therefore need this to be really extensible.

In the following trivial example I would like the "ui-element" to render the content prop inside of it and use the other prop as a data input.

<ui-element :content="<draggable :name="contentData"></draggable>" contentData="col1" > </ui-element>

Since just outputting the template will escape it, and v-html directive will treat it as regular HTML and not a template I am lost, not really sure how to get this done.

I spent about an hour or more googling but no luck. Which leaves me to three options:
1) I'm the first one to need this complex use case (unlikely)
2) Doing this is stupid on so many levels that no-one even bothered (if so, please let me know how to get this result in a smarter way)
3) There is a special uber-cool JS term for this which I simply do not know and that made my search attempts futile

I'm using vue.js 2.1 and Laravel 5.4 to upload a file from a component without a form.

Problem: On the server side, this statement return $request->file('my_file'); returns null. Why?

This is how the vue component looks like:

<template> <input id="my_file" type="file" @change="fileChanged($event)"> <button v-if="my_file" @click="update">Upload</button> </template> <script> export default { data () { return { my_file: null, } }, methods: { fileChanged(e) { var files = e.target.files || e.dataTransfer.files; if (!files.length) return; this.createImage(files[0]); }, createImage(file) { var image = new Image(); var reader = new FileReader(); var vm = this; reader.onload = (e) => { vm.my_file = e.target.result; }; reader.readAsDataURL(file); }, update() { axios.put('/api/update/', { my_file: this.my_file, }) .then(response => { console.log(response.data); }) .catch(error => { console.log(error); }); } } } </script>

On the server side, I have the following method:

public function update(Request $request) { return $request->file('my_file'); // $request->file('my_file')->store(); }

What am I missing? So I can use the function $request->file('my_file')->store(); provided by Laravel to upload the file.

I have a vue.js SPA with a vuex store. Inside my application I have a view for my user. This user comes from the database and is loaded via the vuex store. All fine.

Now my problem is, that I need to load another user into the same view - this second user is related to my first user. When I am loading this second user via the vuex store, the first user gets overwritten.

Is there a good practice to load another user without overwriting the vuex-store user?

My current solution - the first snippet is the vuex-stored first user:

[actions.LOAD_USER](context, id) { return UserRepository.load(id) .then((user) => { context.commit(mutations.SET_USER, user.data); }) .catch((error) => { throw new Error(error); }); }

And the second snippet is how i load my second user:

[actions.GET_USER](context, id) { return UserRepository.load(id); }

This is working, but I am asking you if you have a better solution?

I have a json object, called jsonObject, which contains an array called tracks. I am using this.jsonObject.tracks as an array in my methods and my template (using v-for) and Vue does not complain about that. But I have an issue with this part of my vue template :

<draggable element="ul" :options="{group:'track'}" list="jsonObject.tracks" :move="onMove" @end="onMoveTrackFinished"> [......] </draggable>

I am getting the error, which is due to the list prop :

Invalid prop: type check failed for prop "list". Expected Array, got String.

What's the problem here?