Software

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?

I am learning vue js and building a SPA i want to know how do I add filters and search using an input tag. I also want to add a feature that when i click on a particular name on the table it should open the profile of that person also a select all functionality

<template> <div class="animated fadeIn"> <input type="text" placeholder="Enter Name" v-model="searchText"> <table class="table table-striped"> <thead> <tr> <th>Name</th> <th>College Name</th> <th>College City</th> <th>Level Name</th> <th>Submitted</th> <th>Pending</th> <th>Completed</th> <th>Approved</th> <th>Rejected</th> </tr> </thead> <tbody> <tr v-for="profile in profilesdata"> <td>{{profile.first_name}}</td> <td>{{profile.college_name}}</td> <td>{{profile.college_city}}</td> <td>{{profile.level_name}}</td> <td>{{profile.submitted}}</td> <td>{{profile.pending}}</td> <td>{{profile.complete}}</td> <td>{{profile.approve}}</td> <td>{{profile.rejected}}</td> </tr> </tbody> </table> </div> </template> <script> export default{ name: 'profiles', data () { return{ profilesdata: [] } }, created:function(){ this.loadlike() }, methods:{ loadlike:function(){ this.$http.get('/api/profiles').then(function (res) { this.profilesdata = res.body console.log(53+this.profiles) })}}} </script>

I am trying to write an architecture that will allow people to add their own javascript without having to perform any build steps.

The context in this case is a dashboard UI, where each widget in the dashboard can be a plugin written by someone else.

The dashboard application is a VueJS-based app that is built by webpack and uses python on the backend. The idea is, using a tool like $script or some other script loader, the script that is loaded will have access to all the modules available in the UI. I expect to have Vue, axios, and D3 at the minimum. D3 especially is quite big so it'd be better not to force plugin authors to include their own copy of D3. The project is still in its infancy so Vue and webpack are not tools written in stone for me.

The only solution I can think up is defining a globally available function that calls a plugin function with dependencies as an argument, eg:

In the web app itself:

import * as d3 from 'd3'; import Vue from 'vue'; import axios from 'axios'; function plugin_loader(plugin_cb) { plugin_cb(d3, Vue, axios); }

In a plugin:

plugin_loader(function(d3, Vue, axios) { // now the plugin can use those modules });

But what I'm hoping is a possible solution, is simply for someone to write a plugin in a more "natural" way, using their own imports/requires() and using their bundler of choice to externalise away dependencies that the webapp already ships with.

So essentially, I want to include a third party js file at runtime, and that JS file can have access to all dependencies that the webapp itself has.

thanks in advance for any advice.

I briefly looked at the documentation on Vue Unit Testing

It said:

Anything compatible with a module-based build system will work

The documentation describes ways to test components

In my case I am not using a component. I am adding the vue.js to the page and I create a new Vue Instance.

new Vue({ el: '#app', data: { .... } });

main.js has this code

window.l = function () { } try { window.l = console.log.bind(console) } catch (e) { }

which works in non-Vue apps. However, when calling

l("test")

from a Vue action/method, it complains it isn't defined.

How can that work?

Reasoning: need to output some debugging data, with as less typing as possible.

Iam learning vuejs, i have hundreds of json file i want to load in to my Vue project , in my script, Simply i can do this loading all json files directly in main file as below

//Index.vue <script> import data1 from 'assets/json/data1.json'; import data2 from 'assets/json/data2.json'; ...

above works fine, but now im planning to keep all imports into different file as below

//assets/imports.js import data1 from 'assets/json/data1.json'; import data2 from 'assets/json/data2.json';

and refer imports.js as

//Index.vue <script> import alldata from 'assets/imports'

is it possible to do like this, in not good in webpack too

I have created a Vue component which contains a table from element-ui library. In a created() lifecycle hook, I am requesting table data and assigning the response as a table data.

What I need is to call a function after rows are rendered in a DOM. I have tried 3 approaches ...

1) nextTick() ... works bad

created() { this.isLoading = true; // Get all rows DataProvider.GetRows().then((returnedRowsData) => { this.tableData = returnedRowsData; this.isLoading = false; Vue.nextTick(() => { this.needToCallThisAfterTableDomIsCreated(); }); }); }

2) mounted() lifecycle hook - works bad

mounted() { this.needToCallThisAfterTableDomIsCreated(); }

3) Interval delay - this works, but is is not called immediately after table dom is rendered

created() { this.isLoading = true; // Get all rows DataProvider.GetRows().then((returnedRowsData) => { this.tableData = returnedRowsData; this.isLoading = false; setTimeout(() => { this.needToCallThisAfterTableDomIsCreated(); }, 2000); }); }