Software

I'm trying to make a chat and I do not know how to click an item in one template get the data and transfer it to another. from #template1 to #template2

const app = new Vue({ el: '#content', data:{ users: [], messages: [] } }); template1 <template lang="html"> <li v-on:click="getMessages()"> <div class="content-container"> <span class="name">{{ user.first_name}} {{user.last_name}}</span> <span class="txt"></span> </div> </li> </template> <script> export default { props: ['user'], data: function() { return { messages: [] }; }, methods: { getMessages(id) { this.$http.get('/admin/chat/messages').then(function(res){ this.messages = res.data; } }, } } </script> template2 <template lang="html"> <ul class="chat"> <chat-message v-for="message in messages" :key="+message" :message="message"></chat-message> </ul> </template> <script> export default { props: ['messages'] } </script>

how to pass data between this template

I've set it up with the database, and everything is inserted correctly there. and I am listening correctly with Laravel Echo, and thats being recorded on Pusher, but all my notifications etc are not received by pusher? Can anyone see something I am doing wrong?

My Notification Class

<?php namespace App\Notifications; use Carbon\Carbon; use Illuminate\Bus\Queueable; use Illuminate\Notifications\Messages\BroadcastMessage; use Illuminate\Notifications\Notification; use Illuminate\Contracts\Queue\ShouldQueue; use Illuminate\Notifications\Messages\MailMessage; class RepliedToThread extends Notification { use Queueable; public $thread; /** * Create a new notification instance. * * @return void */ public function __construct($thread) { $this->thread=$thread; } /** * Get the notification's delivery channels. * * @param mixed $notifiable * @return array */ public function via($notifiable) { return ['database','broadcast']; } /** * Get the array representation of the notification. * * @param mixed $notifiable * @return array */ // public function toDatabase($notifiable) // { // return [ // 'thread' => $this->thread, // 'repliedToTime' =>Carbon::now(), // 'user'=>auth()->user() // ]; // } // public function toBroadcast($notifiable) // { // return new BroadcastMessage([ // 'thread' => $this->thread, // 'repliedToTime' =>Carbon::now(), // 'user'=>auth()->user(), // ]); // } /** * Get the array representation of the notification. * * @param mixed $notifiable * @return array */ public function toArray($notifiable) { return [ 'thread' => $this->thread, 'repliedToTime' =>Carbon::now(), 'user'=>auth()->user(), ]; } }

broadcating.php

although when this is fired it gets sent to the database but not to pusher. Everything for pusher is setup in my .env file.

<?php return [ /* |-------------------------------------------------------------------------- | Default Broadcaster |-------------------------------------------------------------------------- | | This option controls the default broadcaster that will be used by the | framework when an event needs to be broadcast. You may set this to | any of the connections defined in the "connections" array below. | | Supported: "pusher", "redis", "log", "null" | */ 'default' => "pusher", /* |-------------------------------------------------------------------------- | Broadcast Connections |-------------------------------------------------------------------------- | | Here you may define all of the broadcast connections that will be used | to broadcast events to other systems or over websockets. Samples of | each available type of connection are provided inside this array. | */ 'connections' => [ 'pusher' => [ 'driver' => 'pusher', 'key' => env('PUSHER_APP_KEY'), 'secret' => env('PUSHER_APP_SECRET'), 'app_id' => env('PUSHER_APP_ID'), 'options' => [ 'cluster' => 'ap1', 'encrypted' => true ], ], 'redis' => [ 'driver' => 'redis', 'connection' => 'default', ], 'log' => [ 'driver' => 'log', ], 'null' => [ 'driver' => 'null', ], ], ];

.env file

BROADCAST_DRIVER="pusher" PUSHER_KEY="public_key" PUSHER_SECRET="secret_key" PUSHER_APP_ID=app_id

bootstrap.js

window._ = require('lodash'); /** * We'll load jQuery and the Bootstrap jQuery plugin which provides support * for JavaScript based Bootstrap features such as modals and tabs. This * code may be modified to fit the specific needs of your application. */ try { window.$ = window.jQuery = require('jquery'); require('bootstrap-sass'); } catch (e) {} /** * We'll load the axios HTTP library which allows us to easily issue requests * to our Laravel back-end. This library automatically handles sending the * CSRF token as a header based on the value of the "XSRF" token cookie. */ window.axios = require('axios'); window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'; /** * Next we will register the CSRF Token as a common header with Axios so that * all outgoing HTTP requests automatically have it attached. This is just * a simple convenience so we don't have to attach every token manually. */ let token = document.head.querySelector('meta[name="csrf-token"]'); if (token) { window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content; } else { console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token'); } // window.axios.defaults.headers.common = { // // 'X-CSRF-TOKEN': window.Laravel.csrfToken, <-- Comment it out (if you are extending layouts.app file, you won't require this.) // 'X-Requested-With': 'XMLHttpRequest' // }; import Echo from 'laravel-echo'; window.Pusher = require('pusher-js'); window.Echo = new Echo({ broadcaster: 'pusher', key: '################', cluster: 'ap1', encrypted : true }); /** * Echo exposes an expressive API for subscribing to channels and listening * for events that are broadcast by Laravel. Echo and event broadcasting * allows your team to easily build robust real-time web applications. */ // import Echo from 'laravel-echo' // window.Pusher = require('pusher-js'); // window.Echo = new Echo({ // authEndpoint : 'http://localhost/forum_web/public/broadcasting/auth', // broadcaster: 'pusher', // key: '9964dcd35bae49f32d6c', // cluster: 'eu', // encrypted: true, // }); iam used vue2

notification.vue

<template> <li class="dropdown" @click="markNotificationAsRead"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"> <span class="glyphicon glyphicon-globe"></span> Notifications <span class="badge alert-danger">{{unreadNotifications.length}}</span> </a> <ul class="dropdown-menu" role="menu"> <li> <notification-item v-for="unread in unreadNotifications" :unread="unread"></notification-item> </li> </ul> </li> </template> <script> import NotificationItem from './NotificationItem.vue'; export default { props: ['unreads', 'userid'], components: {NotificationItem}, data(){ return { unreadNotifications: this.unreads } }, methods: { markNotificationAsRead() { if (this.unreadNotifications.length) { axios.get('markAsRead'); } } }, mounted() { console.log('Component mounted. asd 1111'); Echo.private('App.User.' + this.userid) .notification((notification) => { console.log(notification); }); } } </script>

A brief description is, basically when i click on a "Submit" button per say, an alert should pop out. So I'm using Simplert for Vue to do that.

The project I'm currently doing is a Single Page Application (SPA) so this is where the problem is. The alert only covers the component that I'm in and does not cover the whole page.

Problem:

Is there a way for the alert to cover the whole page?

So I'm unsure of the practicalities of authentication on a SPA, as I try to get used to my new stack of choice.

I will be serving a Node/Express app, with all API routes on /api, and the frontend served on the root / (all routes will serve index.html, then the client-side routing will take care of the rest. So I have the backend authentication set up with the Passport library, which works well. But how does one keep the server and client sessions in sync? As well as taking care of security.

If I make a POST request to /api/login with credentials, what do I return in the response to the client? And where is the session set?

My frontend is Vue, so I assumed I would just pass the user data (if credentials are correct) to the instance and have a user object. But I'm guessing I need to store a token of some sort? (jwt?)

If someone could clear up how this client-server architecture works, that would be great.

Cheers.

What's the earliest life hook of a vue instance that has access to localStorage and other DOM APIs?

I'm trying to create a global component using laravel mix with vue js, but when accessing property this.$el it's undefined. Here's my component file:

Datepicker.vue

<template> <input type="text" :name="name" :class="myclass" :placeholder="placeholder" :value="value" /> </template> <script> export default { props: ['myclass','name','placeholder','value'], data () { return { } }, created () { console.log("this.$el", this.$el); //undefined console.log("this", this); //$el is defined var vm = this; var options = { "locale": "es", "onChange": function(selectedDates, dateStr, instance) { vm.$emit('input', dateStr); } }; $(this.$el) // init .flatpickr(options); }, destroyed(){ console.log("destroyed"); } } </script>

Doing a hotel room booking application in vue2 js. having two screen 1) one gets search input values 2) displays the search result page. see the screen shot below

My route.js is as follows

import FrontEndHome from './components/fontend/Home.vue'; import FrontEndCheck from './components/fontend/Check.vue'; export const routes = [ { path: '/', component: FrontEndHome }, { path: '/check', component: FrontEndCheck } ];

What i want is has to get from and to date from first image and has to display those dates in second image.

I am using SQLDESIGNER plugin for sql schema design, I am trying to integrate this with vue js. I tried to get the xml data from the design, but unable to get that.

Can anyone assist me, to integrate this plugin with vue js also how to map the design xml data with v-model.

Any help would be highly appreciated. Thanks

I have following template:

<template> <div class="is-half"> <form @submit.prevent="save"> <input type="hidden" name="bookID" :value="book.id"> <div class="field"> <label class="label">Title</label> <div class="control"> <input class="input" type="text" placeholder="Title" :value="book.title"> </div> </div> <div class="control"> <div class="select"> <select> <option v-for="author in this.$store.state.authors" :value="author.name" :selected="author.name == book.author" >{{ author.name }}</option> </select> </div> </div> <div class="field"> <label class="label">Description</label> <div class="control"> <textarea class="textarea" placeholder="Description" :value="book.description"></textarea> </div> </div> <div class="control"> <button class="button is-primary">Submit</button> </div> </form> </div> </template> <script> export default { data() { return { book : { id: null, title: '', isbn: '', author: '', description: '', added: '' } } }, methods: { save(book) { console.log(this.book); } }, created() { if(this.$store.state.book != 'undefined'){ this.book = Object.assign({}, this.$store.state.book); } }, computed: {} } </script> <style></style>

I am trying to update the value of selected item, but whenever I press save, the object has the same values which it gets on load. How can I update values if the I load new object, or insert new object if id is null?

A vue.js component creates a button which should call a function, but the function is never called and the v-on:click is not visible in Chrome's element inspect. My html goes like this:

<bottomcontent></bottomcontent>

And my Vue is like this:

var bottomcontent = { template: <div class="bottomcontent"><div class="moreresults" v-on:click="homepage.appendcontent">More Results</div></div> } new Vue({ el : 'body', data : { homepage:{ numberofdivs: 60 } }, methods : { homepage : { appendcontent: function() { homepage.numberofdivs += 60 } } }, components: { 'bottomcontent': bottomcontent } })

I have following template:

<template> <div> <form @submit="save"> <div class="field"> <label class="label">Name</label> <div class="control"> <input class="input" type="text" placeholder="Name" :value="book.title"> </div> </div> <div class="field"> <label class="label">Name</label> <div class="control"> <input class="input" type="text" placeholder="Name" :value="book.author"> </div> </div> </form> </div> </template> <script> export default { data() { return { book : {} } }, methods: { save() { } }, created() { if(this.$store.state.book != 'undefined'){ this.book = this.$store.state.book; } }, computed: {} } </script> <style></style>

So far everything works fine if the book is pass with the this.$store.state.book, but if this is not passed the form is failing, with the error message:

** Error in render function: "TypeError: Cannot read property 'title' of undefined"**

I thought that passing the empty object would dynamically bind the book object and auto create the params.

Is it possible to use the same form for both adding new and editing?

Im trying to learn Vue , and I just started on mac, installed it with terminal,made new folder,opened it in sublime and this is my code, but when I opet in browser , still it doesnt work. Why? Do I have to install something more?

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>vueboze</title> </head> <body> <input type="text" name="input"> <script src="https://unpkg.com/vue@2.4.2"></script> <div id="app"></div> <script src="/dist/build.js"></script> </body> <script> let data = { message: 'Hello World' }; document.querySelector('#input').value = data.message; </script> </html>

I have a parent where I can dynamically add child components into.

When child component is added in mount I register a listener for an event

EventBus.$on('content-type-saving', function() { logic here... }

Problem is when that component is deleted in the parent by removing it from the array of child components, that even still fires and code inside of it is run.

How can I prevent this from happening? I tried this

beforeDestroy() { //do something before destroying vue instance EventBus.$off('content-type-saving') }

but that turned off that event for all other child components as well so those that were still live would not do logic stuff anymore because I turned off event in destroyed child component.

I thought if I turned off an event it would only affect listening for that event for that child component and not turn the event for all child components.

How can I stop destroyed components from reacting on events?

I have an input inside a popover content like so:

JSFiddle

HTML:

<div id="vue-app"> <div class="btn btn-primary" data-toggle="popover" data-placement="bottom" title="Hello World!" data-html="true" data-content='<input v-model="message"/>'> Click Me! </div> <hr> <input v-model="message"> {{ message }} </div>

And here is JS :

new Vue({ el: '#vue-app', data: { message: 'I am a Text' } }); $(document).ready(function() { $('[data-toggle="popover"]').popover(); });

As you can see the input out of data-content binds well, but the one inside doesn't bind!

Any idea would be great appreciated.

i am using VUE.js 2

this is my DOM:

<aside :style="{height : height()}" class="col-sm-4 col-md-3 col-lg-3">...</aside> <main class="col-sm-8 col-md-9 col-lg-9" ref="userPanelMainContents">...</main>

and this is my script:

export default { data() { return {} }, methods: { height () { return this.$refs.userPanelMainContents ? this.$refs.userPanelMainContents.offsetHeight + 'px' : '0px' } } }

i want to get userPanelMainContents height and asign it to aside tag. how can i do that ?!!!

as I am new to node and bable and vue I cannot figure out where to search for that issue. the webpack command does not throw any errors.

• Is it a problem, that I am using the wrong ES? How can I find that out and change?
• did I miss a step or configuration? Or is the config breaking itself?
• did I wrongly include the language module in my main file?

My .bablerc

{ "presets": ["es2015", "stage-0"], "plugins": ["transform-runtime"] }

My package.json

{ "name": "myapp", "version": "0.0.1", "description": "My app", "dependencies": { "bootstrap": "^3.3.7", "vue": "^2.4.2", "vue-multilanguage": "^2.1.1" }, "devDependencies": { "babel-cli": "^6.24.1", "babel-core": "^6.25.0", "babel-loader": "^6.4.1", "babel-plugin-transform-runtime": "^6.1.2", "babel-preset-es2015": "^6.24.1", "babel-preset-stage-0": "^6.1.2", "babel-runtime": "^5.8.0", "webpack": "^1.15.0" }, "author": "You" }

My webpack.config.js

module.exports = { entry: './src/main.js', output: { path: './dist', filename: 'build.js' }, module: { loaders: [ { test: /\.js$/, loader: 'babel', exclude: /node_modules/ } ] } }

and the error and the code where it hits in the build.js in Chromium: Uncaught SyntaxError: Unexpected token export in Firefox:

SyntaxError: export declarations may only appear at top level of a module export default MultiLanguage

Here also the vue code (main.js):

import Vue from 'vue/dist/vue.js' import MultiLanguage from 'vue-multilanguage/src/vue-multilanguage.js' Vue.use(MultiLanguage, { default: 'en', en: { hi: 'Hello', welcome: 'Welcome, {name}' }, pt: { hi: 'Ola', welcome: 'Bem-vindo, {name}' } })

Sorry for the long posting, but I am quite stuck. I read already much about issues about not installed components, and checked twice if I have them all, and feeling that I have installed all. I read about bable and webpack, but it is huuuge and to heavy to find out where to start the debugging.

any recommanded tutorials? any idea?

Suppose I had this code

<main> <form> <input type="text" v-model="name"> <button type="submit" @click="submit"> Submit From Vue Property </button> </form> </main>

And this the Vue code.

new Vue({ el : 'main', data : { name : '' }, methods : { submit(){ } } })

how to submit to server from Vue data property instead? That i used in submit method.

( honestly, my actual code is much complicated but the problem is same. How to submit Vue data property instead? )

I would like to ask experts about the right “VueJS” way to implement SVG schema based on data (data-driven).

I have two totally different proof-of-concepts. The first one uses array’s methods and the second one uses bus.$on / bus.$emit method

So, I would like to hear from you what case is the right -or- is there better solution than my?

1st: http://play.ionic.io/app/e7c1d50192561 2nd: http://play.ionic.io/app/7e86491958061

If you need to play with it, please first fork the playground in the upper right corner - link “fork”.

Thanks

The code below has a div which "moves" between two container div when clicked

new Vue({ el: "#container", data: { left: true } }) #container { width: 500px; display: flex; justify-content: space-between; } #left { width: 100px; background-color: red; } #right { width: 100px; background-color: green; } <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js"></script> <div id="container"> <div id="left"> <div id="element" v-if="left" v-on:click="left=!left">element</div> </div> <div id="right"> <div id="element" v-if="!left" v-on:click="left=!left">element</div> </div> </div>

Is there a concept of path when such an element (with the sameid) changes its location in the rendered DOM? If so: is there a way to visualize its transition from one place to another (via a slide on this path)?

I am using Vue's aysnc components with the following code:

Vue.component( 'async-webpack-example', () => import('./my-async-component') )

It builds fine and webpack manages to create 2.bundle.js

Unfortunately, when loading the file, it looks for 2.bundle.js in the root (http://example.com/2.bundle.js) and not in http://example.com/js/2.bundle.js where it resides.

Do I need a webpack directive to fix this? If so, what kind of directive do I need? Thanks! :)