Vuejs

I have an animation that works on other components but does not work with this one. I tried <transition-group> with no luck as well. The row simply disappears without any animation.

<transition name="card-animation"> <tr is="employee-row" v-for="employee in employees" :employee="employee" :selectedOffice='selectedOffice' :new_hire_location_options="new_hire_location_options" v-on:fire='fireEmployee(employee)' v-if="(employee.location.name == selectedOffice || selectedOffice == 'show all')"> </tr> </transition>

Here's the CSS

.card-animation-enter-active, .card-animation-leave-active { transition: transform 0.25s ease-out, opacity 0.25s ease-out; } .card-animation-enter, .card-animation-leave-to { transform: scale(0); opacity: 0; }

What is wrong with my code?

I'm trying to get the input value on keyup using Vuejs 2 but always get an empty result like the data. Please see code below.

HTML:

<input type="email" @keyup="this.$data.email= $event.target.value" class="form-control" id="email" placeholder="Username (your work email)"> <button type="button" class="btn btn-primary btn-block inactive" @click="submit">Log in</button>

Script:

data () { return { email: '', } }, methods: { submit () { alert(this.$data.email) } }

I have this Axios patch but I only want to include the last three, if the hyperlink_column isn't null. How can I do this?

Thanks,

Mick

axios.patch('/' + self.table + '/' + self.rowId,{ name: self.name, SQL:self.SQL, area_id:self.area_id, report_type_id:self.report_type_id, mode:self.mode, database_connection_id:self.database_connection_id, pagination: self.pagination, show_export_buttons : self.show_export_buttons, filters : self.filters, description : self.description, category_id : self.category_id, hyperlink_column : self.hyperlink_column, linked_report : self.linked_report, link_parameter : self.link_parameter,

I have a problem with a modal component for computed nested property.

I have a parent component that call Modal component passing data by props. the object that I pass to my compoments is Like this:

modalProposal:{ name:test, old: { name: oldTest } }

so i pass my object to my components

<modal :modal-proposal="modalProposal"></modal>

So I have in my component modal:

export default { props:["modalProposal"], data() { return { } }, computed:{ proposal(){ return this.modalProposal; } } }

Now my problem is that in template if i print proposal.name it work but if I print proposal.old.name it return error

"TypeError: Cannot read property 'name' of undefined"

So, How can I access to nested property passed?

Have a problem with assigning user data from firebase auth to my local variable.In Vue instance, have lifecycle hook 'created', I calling firebase auth function for auth state, and in that function call, i want to assign user data to my fireUser variable.I throw console.log after it, and it's printing correct, but if I want to show it on a page it's blank(empty).I thinking it's something to do with promise, but can't put together.Thank you, in advance for the help.

let storage = firebase.initializeApp(config); let db = storage.database(); let usersRef = db.ref('users'); //Vue instance var app = new Vue({ el: '#app', firebase:{ userDb:usersRef }, data: { person:{ email:'', password:'' }, user:{ name:'', description:'', photourl:'', learningjournal:'' }, users:[], fireUser:'' }, methods:{ //Posting data to Firebase submit(){ usersRef.push(this.user); this.user = ''; }, register(){ firebase.auth().createUserWithEmailAndPassword(this.person.email, this.person.password).catch(function(error) { // Handle Errors here. var errorCode = error.code; var errorMessage = error.message; // ... }); this.person= ''; }, login(){ firebase.auth().signInWithEmailAndPassword(this.person.email, this.person.password).catch(function(error) { // Handle Errors here. var errorCode = error.code; var errorMessage = error.message; // ... }); }, logOut(){ firebase.auth().signOut().then(function() { // Sign-out successful. console.log('logout'); }).catch(function(error) { // An error happened. }); } }, created(){ firebase.auth().onAuthStateChanged(function(user) { if (user) { this.fireUser = user; console.log(user); console.log('user',this.fireUser); } else { // No user is signed in. } }); } }); <html> <head> <title>SEPCO: Elium September Cohort Page</title> <link id="favicon" rel="icon" href="https://glitch.com/edit/favicon-app.ico" type="image/x-icon"> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.11/semantic.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link href="https://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet"> </head> <body> <div class="pimg"> <div class="ui two column centered grid"> <h1 class="ui column inverted black center aligned header"><i class="fa fa-graduation-cap" aria-hidden="true"></i>SEPCO <br> <hr> <em>Elium September Cohort Page</em></h1> </div> </div> <div class='ui container'> <br> <br> <br> <h2 class="ui olive inverted segment center aligned header">Welcome</h2> <p id='introduction'>This is the collaborative page of the Elium September cohort. This is the beginning of a collaborative document and it <b>urgently needs your input!</b> So please go into the code, and make this page prettier, smarter, more content rich and of course more JavaScript-enriched.</p> <i>Our clan name on codewars.com: SEPCO</i> <div id='countdown'> <!-- who wants to code up a count-down to the startdate of the bootcamp?? --> </div> <div class="ui grid"> <div class="sixteen wide tablet eight wide computer column"> <h2 class="ui olive inverted segment center aligned header"> Basics of how we want to prepare together.</h2> <ol class="ui list"> <li> Meet, decide on milestones togehter, then share how far you got e.g. using polls in Slack (for example "Did everyone finish watchandcode.com course?")</li> <li> Scheduled hangout time for 2 hours everyday where people will be online working/studying which is non-mandatory. (doodle invite #1) <ol> <li><a href="https://doodle.com/poll/cz8igzmkew2vabfh" target="_blank">Click here to post availability to hangout</a></li> </ol> </li> <li> A Code Wars problem once a week every Friday starting Sept 28th. (doodle invite #2) answer will be on plunkr <ol> <li><a href="https://doodle.com/poll/k6kg6tk7ce4ipmnq" target="_blank">Click here to post time availability for Code Wars problem</a></li> </ol> </li> <li> Share your plunker/codepen/glitch sites! There's two ways how we recommend doing this: <ol> <li> We will use these codesharing-site accounts to share to the group what we have learned ( Share fun projects! And Code wars problems after completion)</li> <li> Make a learning journal where you write down what you learned and what your personal goals are, this is also the ideal place to link to any other plunker/codepen/glitch creation you've made. The URL to this learning journal should be put into your object (see Part 3. below)</li> </ol> </li> <li> HTML and CSS discussed more in 2 weeks (because this can be learned towards the end)</li> </ol> </div> <div class="sixteen wide tablet eight wide computer column"> <h2 class="ui olive inverted segment center aligned header">Shared Milestones</h2> <p class="ui center aligned header">We want to get the following done by September 10th.</p> <ul id="meetingPoints"> <li class="ui padded segment"> <strong>DECIDED:</strong> Complete practical javascript ("PJS") on watchandcode</li> <li class="ui padded segment"> <strong>PROPOSED:</strong> Additional JavaScript (define list of skills/concepts)</li> <li class="ui padded segment"> <strong>REVISIT:</strong> first week of August: Basic HTML</li> <li class="ui padded segment"> <strong>REVISIT:</strong> first week of August: Basic CSS</li> <li class="ui padded segment"> <strong>REVISIT:</strong> first week of August: GIT</li> </ul> </div> </div> <br> <h2 class="ui olive inverted segment center aligned header"> Info on the cohort members & links to their learning journals on plunker </h2> <p>The cohort is an array and every member is an object. Dive into the sourcecode and add an object with your details. And then we asap need someone who makes this section better/prettier (see sourcecode)</p> <br> <br> <!-- loop and create Info card Using Vue.js --> <div id="app"> <!--Starting vue instance here--> <div class="ui form"> <div class="fields"> <div class="field"> <label>Email</label> <input type="text" placeholder="Email" v-model='person.email'> </div> <div class="field"> <label>Password</label> <input type="password" v-model='person.password'> </div> </div> <button class="ui blue button" @click.prevent="register">Submit</button> <br> <div class="ui form"> <div class="fields"> <div class="field"> <label>Email</label> <input type="text" placeholder="Email" v-model='person.email'> </div> <div class="field"> <label>Password</label> <input type="password" v-model='person.password'> </div> </div> <button class="ui blue button" @click.prevent="login">Submit</button> <br> <hr> <!-- I want to print User loged in result here --> <p>{{fireUser}}</p> <hr> <br> </div> <br> <div class="ui grid"> <div class="ui four wide column" v-for="people in userDb"> <div class="ui card"> <div class="image"> <img :src="people.photourl"> </div> <div class="content"> <div class="header">{{people.name}}</div> <div class="description"> <p>{{people.description}}</p> </div> <br> <div class="extra content"> <span class="left floated"> <i class="arrow down icon"></i> <a :href="people.learningjournal">Plunker</a> </span> </div> </div> </div> </div> </div> <br><br><br> <!-- Form for making users cards --> <form class="ui form"> <div class="field"> <label>First/Last-Name:</label> <input type="text" v-model="user.name" placeholder="First/Last Name"> </div> <div class="field"> <label>Description of You:</label> <textarea v-model="user.description"></textarea> </div> <div class="field"> <label>Picture Url:</label> <input type="text" v-model="user.photourl" placeholder="Picture Url"> </div> <div class="field"> <label>Plunker Url:</label> <input type="text" v-model="user.learningjournal" placeholder="Plunker Url"> </div> <button class="ui olive button" @click.prevent="submit">Submit</button> </form <br> <button class="ui button" @click.prevent='logOut'>click me</button> <br> </div> <!--end of vue instance--> <div id="footer"><hr></div> <!-- Your web-app is https, so your scripts need to be too --> <script src="https://code.jquery.com/jquery-2.2.1.min.js" integrity="sha256-gvQgAFzTH6trSrAWoH1iPo9Xc96QxSZ3feW6kem+O00=" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.16.2/axios.min.js"></script> <script src="https://www.gstatic.com/firebasejs/4.1.5/firebase.js"></script> <script src="https://unpkg.com/vuefire/dist/vuefire.js"></script> <script src="client.js"></script> </div> </body> </html>

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.