Software

I want to right align my product and support links in my navigation bar. How do you align links in the navigation bar of a vue.js project overall?

This is how it looks now

This is the code.

<md-whiteframe class = "main-toolbar "> <md-theme name = "teal"> <md-toolbar class = ""> <router-link class = "nav-link " :to = " { name: 'levi' }" style = "color:white; text-decoration: none; ">levi</router-link> <router-link id = "nav"class = "nav-link" :to = "{ name: 'Product' }" style = "color:white; text-decoration: none;"> Product </router-link> <router-link id = "nav" class = "nav-link" :to = "{ name: 'Support' }" style = "color:white; text-decoration: none;"> Support </router-link> </md-toolbar> </md-theme> </md-whiteframe>

I try to make broad cast notification laravel 5.4 and vuejs 2 but notification not appear any one can help me ?

navbar.blade.php

Notification.vue

NotificationItem.vue

result npm run watch that errors appear

Header

I had a web app hosted on my personal server. It was built with Vue.js 2 and it was working properly until last month that I checked.

Basically, it loaded some content from Firebase and after choosing some options in the app, it gave me a result.

Even if I try to display some text that is not from Firebase, it still refuses to show anything.

In the console, there are no errors, but the only message I noticed was this:

["add",{"textareas":[],"contenteditables":[],"iframes":[],"htmlghosts":[]}] bundle.js:8321:29

I'm not sure what it is. I don't know what is suddenly wrong and how to fix it.

I have an async operation in parent component and need to notify child, that this operation was completed. Could I watch in child for a property change. Somewhat like:

new Vue({ props:['parentReady'], watch:{ parentReady(val){ alert('parentReady prop was changed'); } } })

I want to perform a task (scrolling to bottom, since new elements where added) after a view has been updated by vue.

Here is my code:

export default { mounted() { this.connect(); }, connection: null, methods: { connect: function () { ... }, onMessage: function (msg) { this.messages.push(msg); this.scrollDown(); return true; }, scrollDown: function () { $("html, body").animate({ 'scrollTop': $(this).offset().top }, 100); }

As you can see, the this.scrollDown(); is invoked after this.messages.push(msg);, so since the view is not updated immediately the scroll is not well performed. How is it supposed to be made?

Im building application like real time dashboard. Using many databases and external APIs.

(The first Idea was AJAX + Laravel Queues, but I found VueJS and It's interesting.)

The idea is to get the data in background with Laravel Queues from all sources and then storage it localy. Next step is getting this data with VueJS.

The problem I have is the storage part. I dont have idea and actually dont know how to store it so VueJS can efficiently get this data from storage and on the other hand Laravel can save the data to it the same.

There will be many users loging in a system so I created the MySQL database for them but dont know, if it's a good solution.

Thanks for advices!

I am calling a method from each item in a v-for. The method returns the proper object but I want to access that information in other pieces of my .card. Such as having the {{name}} reflect the sponsor's name returned from that method. Normally I would have the method push the data to Vue data and then access via item. But that would be strange to do for 200+ items. (Perhaps I'm missing something in that logic)

I have the following VueJS setup:

HTML:

<!--inside v-for--> <div class="card"> <p>{{ getSponsor(key) }}</p> <p>{{name}}</p> </div>

JS:

firebase () { return { deals: db.ref('deals'), businesses: db.ref('businesses') } }, methods: { getDealSponsor (key) { db.ref('businesses').child(key).on('value', snap => { return snap.val() }) } }

I'm moving a site from AngularJS 1.x that relies heavily on the $compile service (which is no longer available in Angular 2.x. In the application I have a directive that looks something like this <myDir elemId="someRestEndPointID"></myDir> and does the following:

1) A http call is made and the response returns a string that contains a directive <myDir elemId="someRestEndPointID"></myDir>

2) A call is made to the server to for /someRestEndPointID

3) Angular gets the content and renders and looks for another <myDir> tag

4) the process is repeated (recursive)

I have not yet found something that does this for our new framework Vue.js. Is there a similar feature or library that would achieve this logic in Vue.js?

I have a little issue here, I want to get posts (json format) from Wordpress Rest API, and I do not understand what am I missing here. Can someone helps me?

var App = new Vue({ el : '#app', data: { posts: '' }, beforeCreate: function(){ console.log('I am the first one!'); }, mounted: function(){ console.log('mounted fired'); posts = this.$resource('http://volkov.co.il/wp-json/wp/v2/posts?per_page=3'); posts.get(function(response){ this.$set('posts', response); }); }});

And here is my html:

<div id="app"> <div class="row"> <div class="large-12 columns"> <article class="post-article" v-for="post in posts"> <h1>post title</h1> <h3>{{ post.id }}</h3> </article> </div> </div> </div> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/1.3.4/vue-resource.js"></script> <script src="js/app.js" charset="utf-8"></script>

As you can see I am using vue-resource library. I am running this code from local machine. What am I missing here? Thanks

I'm doing a "status update" component of sorts, in my actual component I'm marking the first custom checkbox (the circles at top, etc.) as checked...but for the CodePen below, I just marked them all as :checked='false' to iterate my issue.

The "twitter" checkboxes won't check and uncheck. The Facebook ones will.

I'm certain this has to do with the fact that I'm enabling/disabling a character counter on the twitter checkboxes. If you click one of the twitter checkboxes, you'll notice the character counter turn on, but the checkbox is never checked...

For example, in the method toggleMaxCharLength(), if I comment out self.enableMaxCharLength = true;, the checkbox work as they should.

If I remove the :checked='false' from the input v-for, works as it should...

https://codepen.io/mikebarwick/pen/qXdqBO

I'd like to show a modal when /url/confirm/ is requested.

This is what've done so far:

// footer component import Modal from '../Modal/Modal'; export default { components: {Modal,}, data() { return { showModal: false, }; }, mounted() { if (window.location.href.match('/confirm/')) { this.showModal = true; } }, }; // my main js import MyFooter from './components/footer/MyFooter; import router from './router'; new Vue({ el: '#app', router, components: {MyFooter, /* other components too */} });

And I combined with this https://router.vuejs.org/en/essentials/dynamic-matching.html#reacting-to-params-changes to cover all use cases?

This works but does not seem to be a vue way to do things, especially that I do the same thing in two different files.

How do I detect a /confirm/ route whose name is confirm in vue in order to display the modal from within my component footer?

this my vue template

<div class="col-sm-4 col-xs-6 thumb" v-for="(photo, index) in photos" @click.prevent="check(index)"> <a class="thumbnail" :class="{'active': photo.checked}"> <img class="img-responsive" :src="photo.picture" alt=""> </a> </div>

and this is check() method:

check(index) { if(!("checked" in this.photos[index])) this.photos[index].checked = true else this.photos[index].checked = !this.photos[index].checked },

every thing seem good for me but it's not working what the problem could be???

I have some trouble with understanding an error I am receiving using vue.js and hope that someone can help me out here. I believe that it is a silly mistake but I am unable to spot it.

I am receiving this error here: Use of undefined constant providers - assumed 'providers'. I am using laravel and blade here. I receive this error in the browser. I assume that it has something to do with the way I am trying to display the providers object using v-for loop in vue.js and since I am a beginner, I am probably making a mistake here. Here is my code:

Component:

Vue.component('filter-section', { template: "#filter-template", props: ['providers'] }); // create a root instance new Vue({ el: '#home-filter-result' });

Filter-blade.php

<div id="home-filter-result"> <filter-section v-for="item in providers" :providers='{!! $providers !!}'> </filter-section> <template id="filter-template"> {{ item }} </template> </div>

Providers is an object in this format:

providers : Array[20] 0:Object

value1: '1'

value2: '2'

value3: '3'

I have numerous pages I want to have their own SPA, I have successfully done that for a page (people.blade.php):

@section('content') <div class="container"> <div class="row"> @include('partials.sidebar') <div class="col-md-9 container2" style="font-size: 15px; font-weight: 100;">People Management</div> <main id="app" class="col-md-9" style="padding: 10px;"> <router-view></router-view> </main> </div> </div> @endsection

Now, I want to use router-view on another page (articles.blade.php)

@section('content') <div class="container"> <div class="row"> @include('partials.sidebar') <div class="col-md-9 container2" style="font-size: 15px; font-weight: 100;">Articles Management</div> <main id="question" class="col-md-9" style="padding: 10px;"> <router-view></router-view> </main> </div> </div> @endsection

But the page rendered in the previous router-view shows on articles.blade.php even though I changed the id from app to question.

The routes.js look like this:

const routes = [ { path: '/', component: require('./components/people/ListParticipants') }, { path: '/new', component: require('./components/people/AddParticipant') }, { path: '/edit', name: 'edit', component: require('./components/people/EditParticipant') } ]; export default new VueRouter({ routes });

And app.js looks like:

const app = new Vue({ el: '#app', router }).$mount('#app');

I need to be able to have numerous SPAs which needs to be situated in different server loaded pages, I won't mind if there's better approach.

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