Software

Hi everyone i have the following problem, i have a class written in ES6 Javascript which you can see here. It is essentially an implementation of FineUploader, now my problem is that FineUploader has several callbacks

callbacks: { onAutoRetry: (id, name, attemptNumber) => { this.$emit('autoretry', {id, name, attemptNumber}) }, ...

and these should be defined in that constructor and can execute different actions that i would like to take place in my Vue Template. (as you can see i used to have $emits and everything) Is there any way that i can bind these callbacks to methods on a Vue Template of mine? Or would i have to create a whole component for this FineUploader implementation?

Thank you in advance for your help

I am trying to import a third party min js and min css from a folder with webpack, but I can not find this folder with webpack.

My structure is

-node_modules -src -lib -min.js -css -min.css

But I can not recognize this lib folder. I tried alias on my webpack.config.js

resolve: { alias: { 'vue$': 'vue/dist/vue.esm.js', 'lib': './lib/' } },

I tried resolve.modules:

resolve: { modules: [path.resolve(__dirname, "lib")], alias: { 'vue$': 'vue/dist/vue.esm.js', } },

But did not work as well. What am I doing wrong?

I have the following nested components in part of my VueJS app. Each of the result in the search results uses Result.vue. Clicking a 'view more' button loads in the component MoreDetails.vue which in turn renders a Google Map.

SearchResults.vue | |__Result.vue | |__MoreDetails.vue | |__gmap.vue

When you click 'view more' I am getting the following error.

[Vue warn]: Unknown custom element: <gmap> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

If I use gmap in the Result.vue file I don't get any issues. Is there a limit on nesting?

I have a boostrap alert component which I want to display a list of validation errors from my form.

<div class="alert alert-danger" role="alert" v-if="errors.length"> <ul v-bind:item="errors" > <li v-for="error in errors">{{ error }}</li> </ul> </div>

The unordered list is bound to the errors array declared in data.

data() { return { errors: [], ...

In the request, error catch I set errors to equal each element in the error response, like so.

this.$http.post(this.url, request).then(response => { //show success message }, response => { var responseErrors = []; Object.keys(response.body).forEach(function (key) { responseErrors.push(response.body[key]); }); this.errors = responseErrors; });

However, there is no rendering of the errors after I assign it from the response.

Is there something I am missing? Or is there a better way to render error messages on a form using Vue.js?

I am using MDL to web development and have:

<tr v-for="(blabla, index) in data"> <td>{{ blabla.id }}</td> <td>{{ blabla.username }}</td> <td>{{ blabla.name }}</td> <td><router-link :to="{ name: 'name', params: { blabla: blabla.id } }" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">Details</router-link> </td> </tr>

I want to make all row clickable, not just the button that have the router link.

I have an app which is contained in

<div id="app" v-bind:style='{backgroundColor: backgroundColor}'> ... the app ... </div>

The routing is done following the example in the documentation (this is a webpack project):

import Vue from 'vue/dist/vue.js' import VueRouter from 'vue-router' import ComponentOne from './component1.vue' import ComponentTwo from './component2.vue' Vue.use(VueRouter) const routes = [{ path: '/foo', component: ComponentOne }, { path: '/bar', component: ComponentTwo } ] const router = new VueRouter({ routes // short for `routes: routes` }) const app = new Vue({ router, data: { day: "Monday" }, computed: { backgroundColor: function () { console.log(JSON.stringify(router.currentRoute)) if (router.currentRoute.path == "/foo") { return "green" } else { return "blue" } } } }).$mount('#app')

I wanted to background to be dependent on the current route (router.currentRoute.path). The solution above does not work, however, as router.currentRoute.path is not detected by the Vue instance as having changed (is not reactive).

What is the correct way to access these dynamic router data from within the Vue instance?

In my vue application I've got lots and lots of input fields (example):

<div class="field"> <label for="name" class="label">Naam</label> <div class="control"> <input id="name" name="name" type="text" v-model="relation.name" class="input" :class="{ 'is-danger': errorsHas('name') }" autofocus> <p class="help is-danger" v-if="errorsHas('name')">{{ error('name') }}</p> </div> </div>

So I would like to wrap this in a input component. But since vue 1 the .sync method is gone so how would I do this? Firing events is not realy a solution I guess. Just wondering how to solve this?

I would like to have something like this:

<custom-input v-model=relation.name></custom-input>

And everything else (class name, autofocus etc...) must be handled in that component.

Is this possible?

I am trying to filter array on key where keys are dynamic in nature. The checkbox will add another key to array. There are two type of ride [A,B], when user select A, only ride of type A get displayed and when user select B, only ride of type B get rendered, if both are selected, all rides are get rendered.

<!DOCTYPE html> <html> <head> <title></title> </head> <body> <div id="app"> <div id="filters"> <input type="checkbox" name="filter" value="A" v-model="rideFilter"> Ride Type A <input type="checkbox" name="filter" value="B" v-model="fileFilter"> Ride Type B </div> <div id="rides"> <ul> <li v-for="ride in rideAfterFilter"> {{ride.src}} - {{ride.dest}} </li> </ul> </div> </div> <script> new Vue({ el:'#app', data:{ rides: [ {src:'A',dest:'G',type:'A'}, {src:'B',dest:'H',type:'B'}, {src:'C',dest:'A',type:'A'}, {src:'D',dest:'B',type:'B'}, {src:'E',dest:'E',type:'C'}, {src:'F',dest:'D',type:'D'}, ], rideFilter:[] }, computed:{ rideAfterFilter:function (){ this.rides.filter(function(ride){ //here }); } } }); </script> </body> </html>

I am facing an interesting problem: I have a form where I want to insert old values (if the form was submitted before) like this:

<input type="text" :value="oldName" id="name" />

Now the problem is that I can't overwrite the oldName variable like this, so yes, I have the old value in there, but I can't change it anymore. Can you think of a solution? I basically want the value to be in the textfield, but I want the user to be able to change it. Thank you!

Hi everyone i'm having a bit of a problem organizing my components in a way that makes sense, i'm using VueJS 2 and Fine Uploader 5.14.5 and these components i'm creating are essentially wrappers for FineUploader.

I have 3 custom components, Uploader, Dropzone and Preview.

Uploader contains the FineUploader instance and it's constructor, an implementation of FineUploaderBasic from the following import

import FineUploader from 'fine-uploader/lib/all'

It sets up FineUploader in the mounted() hook using the options available on FineUploader's documentation

Then Dropzone is an implementation of FineUploader's DragAndDrop functionality and finally Preview is just a div where i show img previews of each file through Canvas...

So the problem is that my implementation is supposed to work through steps, so first you get the Dropzone and the upload button (from the Dropzone and Uploader components) and then after that you would get the Preview component, supposedly by switching the components using v-if and v-else the problem with this is that since my implementation of FineUploader is defined in the Uploader component i cannot get rid of that component, if the Component is destroyed then FineUploader's instance stops working and i need access to it's methods in order to be able to cancel queued files, pause and resume uploads... etc.

I can't really keep it as the parent component either as that would mean that FineUploader's hidden input remains on the DOM and will be placed right in front of my Preview component's action buttons...

https://codeshare.io/2p6mE4 <- this is my Uploader.vue component.

Let me know if you guys need anything else, all i want to know if someone has ever succeeded in using this library with Vue and if so what approach did they take as i'm completely confused as to how to structure something like this. Could i use an external class for FineUploader and import it into my Vue template? But then how could i bind anything to it's callbacks (as i'm doing in Uploader.vue)?

Again the idea is, Uploader appears with the Dropzone, user selected X files, Uploader (clickable interface) disappears along with Dropzone, and leaves a totally different component visible instead, but this component still needs access to FineUploader's methods which are left in the Uploader.vue component...

I'm rendering svgs inline on my html5 page. I'd like to have a nested style block inside of each of the svgs for convenience, rather than using presentation attributes or moving everything to the main stylesheet.

But I am also using vue at the current time and there seems to be a conflict.

I get an error in the browser console when trying this (and the svg initially appears, then goes black), which seems to be from the Vue loader.

In all honesty I'm not all that clear on exactly what is happening. If anyone can explain that would be greatly appreciated! Thanks.

I'm very new to VueJS so expect this is very much a me problem but hoping for some guidance.

I have a Vue instance the person object in data contains some predefined data but I'm adding to the object when it's mounted. For whatever reason I cant understand it's not updating the DOM with the data inserted when mounted. I've checked the vue app and can confirm the person being added on the mounted method is being added correctly.

new Vue({ el: '#app', data: { people: { Dave: {'Age': 30, 'Plays': 5} } }, mounted: function() { this.people['Rob'] = {'Age': 22, 'Plays': 24}; } }); <script src="https://unpkg.com/vue"></script> <div id="app"> <ul> <li v-for="(person, key) in people"> {{ key }}: {{ person.Age }} </li> </ul> </div>

I have a feeling this is either a Vue gotcha or I'm doing something really stupid.

I'm developing with webpack-dev-server, and in order to proxy backend APIs, I use http-proxy-middleware. But there is a strange thing that ALL the response contains a string "Error occured while trying to proxy" in the end as shown in the picture. However, the http status code is 200. Btw, I'm using OS X and there isn't any error when the code running on Windows.

Response text contain errors

proxyTable: { '/rest/': { target: 'http://127.0.0.1:8080', changeOrigin: true }, '/upload/': { target: 'http://127.0.0.1:8080/upload/', changeOrigin: true, } },

I've a Vuejs component that takes a "datasetId" as prop. I want a 2 way binding in my case, so I use the .sync modifier

<mycomponent :datasetid.sync=1 />

In this component I've a select component and I want it to show the good dataset, so I bind it to my props.

<select-component v-model="datasetid" />

Since we cannot mutate a prop (datasetid is a prop and bind it to v-model will potentially mutate datasetid). I decided to wrap this value on a computed property.

<select-component v-model="computedDatasetid"> computed: { computedDatasetid: { get() { return this.datasetid; // return the prop }, set(v) { // don't mutate the prop directly but update the parent component. this.$emit('update:datasetid', v); } } }

With this code, the "getter" is only called 1 time (when the component is create the first time). It's logical because the documentation says that the computed property is updated when an inner data is updated. And I don't update anything in the "setter".

How to force model to change when I call the setter ? (ex: this.computedDadasetid = 5)

Computed properties are the good way to do what I want ? Would be better to use raw 'data' or watcher or anything else ?

Thanks

I have a posts loop where each post has a comment box.Initially all comment box are hidden and when someone clicks on 'comments' button it should show the comment field for this user. I am having trouble to show specific comment box associated with the specific post. my code is as follows -

<div class="post-section" v-for="(post,index) in posts"> <div class="media-content">{{post.body}}</div> <button @click="getComments(post, index)" class="btn btn-link"><i class="fa fa-comments-o"></i>{{ post.total_comments }} Comments</button> <comment-input :postId="post.id"></comment-input> </div> <script> export default { data() { return { posts: [], } }, created() { Post.all(posts => this.posts = posts); }, methods: { getComments(post, index){ axios.post('getcomments', {id: post.id}) .then(response => { this.$set(this.posts, index, Object.assign({}, post, { comments: response.data })); }); }, } } </script>

When getComments(post, index) method executes i want to make the next comment-input only. Any help??

thanks in advance.

I'm trying to learn Docker. I installed Docker ToolBox on Windows 10 (I have Home Edition, so I can't use regular Docker installation because that Windows version doesn't have Hyper-v).

Next, I tried this container from Docker Hub:

docker pull ebiven/vue-cli

I added new alias as was written on container page (I changed name to vuejs because I have vue installed locally):

alias vuejs='docker run -it --rm -v "$PWD":"$PWD" -w "$PWD" -u "$(id -u)" ebiven/vue-cli vue'

And then in the console I wrote:

vuejs init webpack .

I got an error message:

vue-cli · Failed to download repo vuejs-templates/webpack: EACCES: permission denied, mkdir '/.vue-templates'

How to fix this?

It is possible to setup vueify this way, so it compiles single .vue files to corresponding .js files?

For example.

Input: my-component.vue

<template> <div>{{ message }}</div> </template> <script> module.exports = { data() { return { message: 'Hello World', }; }, }; </script>

Output: my-component.js

Vue.component('my-component', { template: '<div>{{ message }}</div>', data() { return { message: 'Hello World', }; }, });

I am trying to use jquery-ui with VueJS 2 so i can use functions such as datepicker, sortable and slider. However, i am faced with an error:

TypeError: $(...).datepicker is not a function

Here's what i've done to try get this working, in my app.js file i have loaded JQuery and JQuery UI before I require Vue:

window.$ = window.jQuery = require('jquery'); window.$ = $.extend(require('jquery-ui'));

I have created my component slider and here is the content:

Vue.component('datepicker', require('./components/Datepicker.vue'));

Here is the component itself

<template> <div class="datepicker"></div> </div> </template> <script> export default { data() { return { }; }, mounted() { $(this.el).datepicker(); } } </script>

How can I get this to work?

My template

<div class="upload-component" @dragend="log('end')" @dragenter="dragEntered" @drop.prevent @dragover.prevent> <div class="zone" @drop="dropped"> </div> <p draggable="true">drag me</p> </div>

My js

export default { name: 'UploadComponent', methods: { log(str){ console.log(str) }, dragEntered(e){ // change some styles }, dropped(e){ console.log(e.dataTransfer.files) } } }

The problem: If I drag the P element and drop it or hit escape it will log "end". If I come with a file from my desktop and put it back on desktop or hit escape or drop it, the dragend event wont fire and it wont log anything

I am trying to set up a development boilerplate which can also easily push a Vue.js project to NPM.

I am running into a problem with my webpack.prod.js file, the error is:

ERROR in build.js from UglifyJs Unexpected token: operator (>)

The code to uglify is:

// minify with dead-code elimination new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } })

This is my project and the exact file where it seems to go wrong:

https://github.com/stephan-v/vue-inline-svg/blob/master/webpack/webpack.prod.js

The project uses Babel to transpile to ES6 and Webpack to compile to UMD format when I run npm run production. This command uses the webpack.prod.js configuration.

I am probably not seeing something that could be fixed easily but I have no clue what is going wrong here.