Software

I've got a modal component that looks like this

//modal component <template> <slot></slot> <slot name='buttons'></slot> </template>

I want to use it as a wizard

//wizard component <template> <modal> <step1-state v-if='step === 1'/> <step2-state v-if='step === 2'/> </modal> </template>

Is there a way that step1,step2,etc consume buttons slot?

This does not seem to work

//step1-state component <template> <div> <span>Does it work?</span> <div slot='buttons'> <button>yes</button> <button>no</button> </div> </div> </template>

Hy i am using vue to create chat application and using pusher as service provider

This is my app.js file

require('./bootstrap'); window.Vue = require('vue'); Vue.component('chatcomposer', require('./components/ChatComposer.vue')); Vue.component('chatmessage', require('./components/ChatMessage.vue')); Vue.component('mychatlog', require('./components/ChatLog.vue')); const app = new Vue({ el: '#app', data:{ messages:[], usersInRoom:[] }, methods:{ sendMessage(message){ var contact_id = document.getElementById('chat_name').dataset.contactid; axios.post('/messages',{contactid:contact_id,mesage:message.message}).then(response=>{ }); this.messages.push(message); }, addChatWindow(){ var a = this.$addChild()({},chatComposer); a.$mount(); } }

});

This is my Html view in which i am using the views

<div class="row form-group"> <div class="col-xs-12 col-md-offset-2 col-md-8 col-lg-8 col-lg-offset-2"> <div id="messageBox" class="panel panel-primary"> <div class="panel-heading"> <span class="glyphicon glyphicon-comment" ></span><span id="chat_name" data-contactid =""> </span> <div class="btn-group pull-right"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="color: #fff">&times;</button> </div> </div> <mychatlog :messages="messages" ></mychatlog> <chatcomposer v-on:messagesent="sendMessage" ></chatcomposer> </div> </div> </div>

Here is my ChatLog.vue file

<template> <div class='chat-log'> <center> <input type='button' value='Load previous messages' @click='getMessages()'></center> <chatmessage transition="fade" transition-mode="out-in" v-for="message in allMessages" :message="message"></chatmessage> </div> </template> <script> export default { props :['messages'], data(){ return{ allMessages:this.messages } }, methods:{ getMessages(){ var contact_id =document.getElementById('chat_name').dataset.contactid; axios.get('/messages/'+contact_id).then(response=>{ this.allMessages = response.data; }); } }, updated(){ var _this=this; var contactId = document.getElementById('chat_name').dataset.contactid; alert(contactId); window.Echo.private('inbox.'+ contactId) .listen('.App.Events.inboxed',function(e){ console.log(e.message); _this.messages.push({ message:e.message.message, user: e.user.username },); }); } } </script>

Here is my ChatMessage.vue file

<template>

<ul class="chat "> <li class="right clearfix"><span class="chat-img pull-right chatimagerisizer"> <img src="img/download.jpg" alt="User Avatar" class="img-circle chatimagerisizer" /> </span> <div class="chat-body clearfix "> <div class="header"> <br> <small class=" text-muted"><span class="glyphicon glyphicon-time"></span>15 mins ago</small> <strong class="pull-right primary-font">{{ message.message }}</strong> </div> </div> </li> </ul>

export default { props:['message'] }

What i want to achieve

• Create seprate chat window for each contact dynamically to listene seprately for each chat.

I am sick of it need help.................

I followed this guide: https://laravel.com/docs/5.4/passport and i successed create secret keys. However, when i login as other users, i can see the keys that i created from admin accounts. i.e:

admin: personal key string is also "ABCDE"
user A : personal key string is also "ABCDE"
user B: personal key string is also "ABCDE"

It looks like the "ABCDE" is global? Any clues why i get this error?

I have a JSON array in which I can dynamically add a simple property to its objects (visible:false) with Vue.set, like this :

this.$set(object,'visible',false);

If an object of the array needs to be visible (which the case most of the time), it just doesn't have this property. I did this because my JSON array can be REALLY big and I didn't want to have this "useless" property.

My question is : is it a good practice according to Vue.js ? I saw in the documentation that Vue.set is kind of a hack for setting properties. Does this hack influence reactivity of Vue?

In my Vuejs(2.x version), I came across as following:

Vue.component('service',{ template: '<div>' + '<div>{{serviceData.serviceName}}</div>' + '<input v-model="serviceData.serviceName">' + '</div>', props: ['serviceData'], }) var demo = new Vue({ el: '#demo', data: { allData: { serviceName: 'Service1', serviceType: '0', otherInfo: 'xxxinfo', }, }, computed: { serviceData() { return { serviceName: this.allData.serviceName, serviceType: this.allData.serviceType, }; }, }, }) <div id="demo"> <service :service-data="serviceData"></service> </div>

as above, in my Vue instance I have the original data of alldata, which is an object type. And since it contains some other non-related information. I created an object by computed which only contains related information and name it as serviceData.

And pass the serviceData object to the component service via props.
In the service component, I have an input element which two way bind to serviceData.serviceName with v-model.

But it turns out the two way binding can't work correctly.

So how to add reactivity in this case.

Please refer to this live demo:

https://jsfiddle.net/baoqger/t3mr9de3/1/

there. I am trying to add stripe checkout form through VUE Js template.

<form action="/your-server-side-code" method="POST"> <script src="https://checkout.stripe.com/checkout.js" class="stripe-button" data-key="pk_test_api_key" data-amount="2000" data-name="1234CPM" data-description="2 widgets" data-image="https://stripe.com/img/documentation/checkout/marketplace.png" data-locale="auto"> </script>

But whenever I try to include this form element through vue template, it gives error stating "- Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <script>, as they will not be parsed. ".

It would be very helpful if I could get a way to solve this. Any suggestion would be great. Thank you in advance.

I'm trying to reuse a method within another of my vue js methods like this :-

sendCode: function () { this.showSection("SENDING"); $.ajax({ url: "someurl" + app.searchResponse.Id, type: "POST", contentType: "application/json", success: function (result) { if (result.Success) { this.showSection("SMS SENT"); } else { this.showSection("SMS FAILED"); } }, error: function (error) { console.log(error); this.showSection("SMS FAILED"); } }); }, showSection: function (section) { return app.ui.currentSection = section; }

But i get caught Type Error stating this.showSection() is not a function.

I have a problem with bootatrap when im using vuejs in laravel 5.4 with phpstorm. Bootstrap styles from sass arent working in example on laravel 5.4 with vuejs on starting.

Firstly had a problem with dev in vue. I installed nodejs and ruby. But still Has no bootstrap in there. Anyone got same issue?

I would like to save the latest index inside a v-for, but I don't know how to include this logic inside the template?

Basically, I have this:

<div v-for="(reply, index) in replies" :key="reply.id">

I want to include this logic inside the template somehow:

this.last_index = index

I just want to know the amount of total replies in that v-for loop.

Thank you!

I'm working in a Vue.js and I have :

<span v-if="!change[product.id]['name']" v-on:click="show(product.id, 'name')" style="cursor:pointer"> {{{ product.name }}} </span> <span v-if="change[product.id]['name']"> okays </span>

I initialise my 'change' with that :

this.$set('products', response.data.products) self.productsLoading=false let array = [] array['name'] = false for (let i = 0; i < response.data.products.length; i++) { self.change[response.data.products[i].id] = array; } console.log(self.change)

So my console.log show me the array I want to have so so far so good.

And my show function :

show(id, field){ let array = this.change array[id][field] = true this.$set('change',array) console.log(this.change) },

Once more, my console.log is still good when i click on the product.name but I still see the product.name instead of "okays"

In my application, I'd like to use bootstrap-datetimepicker library, which lets you have a date and time picker on the website.

I just put the datepicker in my HTML (some divs and input). I also added the script that initializes the whole thing.

I observed a strange behaviour: if my datetimepicker is placed inside Vue div, it doesn't work! (when I click on the input field, the calendar should be displayed). When I put the picker outside of Vue DIV it works perfectly.

Generally, I noticed that Vue blocks mouse events, i had the same issue with MetricsGraphics.js library (for drawing graphs) - if i put it inside Vue DIV, mouse hover events do not work at all. i had to put it outside of Vue.

What's the reason for that? In case of datetimepicker, I can't put it outside of Vue, because I'd like to use Vue capabilities on it.

I didn't include any code, but basically, this doesn't work:

<div> <div id="vue-app"> <!-- DATE_TIME PICKER: --> <div class="form-group"> <div class='input-group date' id='datetimepicker1'> <input type='text' class="form-control" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> <div> <div> <script type="text/javascript"> $(function () { $('#datetimepicker1').datetimepicker(); }); </script>

And this works:

<div> <div id="vue-app"> <div> <!-- DATE_TIME PICKER: --> <div class="form-group"> <div class='input-group date' id='datetimepicker1'> <input type='text' class="form-control" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> <div> <script type="text/javascript"> $(function () { $('#datetimepicker1').datetimepicker(); }); </script>

i am using vue.js for developing a single page application and want to know how can i use the jquery part of the bootstrap in vuejs,also want to know about the script tag component of vue like methods,mounted etc. I have tried using bootstrap but i am unable to add the jquery part of my code

I return from my backend one Model Object like:

$model = new MyModel(); $meeting->name = "name test n.".rand(0,10000); $meeting->data = Carbon::NOW();

Now in my fronted created with VueJs, for property data I have:

{ "date": "2017-07-31 08:03:44.000000", "timezone_type": 3, "timezone": "UTC" }

But How Can i parse data from carbon with VueJs with format dd/mm/yyyy ?

I'm trying to get a demo to work and it works fine in Chrome but fails in IE11.

The syntax error is related to an eval() but is only an issue with IE11. An example of the issue can be seen here (view with IE11):

Example site not working in IE11.

The source is located here.

I have modified the .babelrc file to look like:

{ "presets": [ ["env", { "modules": false, "targets": { "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] } }], "stage-2" ], "plugins": ["transform-runtime"], "env": { "test": { "presets": ["env", "stage-2"], "plugins": ["istanbul"] } } }

My webpack.base.conf.js file has been changed to include the babel-polyfill but nothing seems to help fix the issue.

app: ['babel-polyfill', './src/main.js']

Any suggestions are much appreciated.

I would like to have something that the following Vue template, but it does not work with the property selected. What is the correct property name?

<select :selected="myList"> <option value="abc">ABC</option> </select>

I do not understand what i am doing wrong. I'm using Vuetify framework with nuxt.js on top of vue.js.

I wish that the navigation drawer's initial state to be open on the index page but close on the others. I can manage to have the desired result when i first load the page (if it's the index page the drawer is shown otherwise it's hidden), but when i change the page using the link in the drawer (nuxt js is using vue router in the background) the drawer preserves it's state.

I've made a quick middleware containing this:

export default ({store, route}) => { const mitem = store.state.menu.filter(item => item.to.indexOf(route.name) >= 0 )[0] const title = mitem ? mitem.title : 'Home' store.commit('setPageTitle', title) }

here's the store were are the state and mutations (the menu json file contains the entries with the following keys: { title, icon, to })

import menu from '~json/menu.json' export const state = () => ({ menu, drawer: true, pageTitle: undefined }) export const mutations = { toggleDrawer: state => { state.drawer = !state.drawer }, setPageTitle: (state, title) => { state.pageTitle = title state.drawer = title === 'Home' console.log(state.drawer) } }

And here's the layout

<template> <v-app> <v-navigation-drawer persistent v-model="drawer" > <v-list> <v-list-tile router v-for="(item, i) in menu" :key="i" :to="item.to" > <v-list-tile-action> <v-icon>{{ item.icon }}</v-icon> </v-list-tile-action> <v-list-tile-content> <v-list-tile-title>{{ item.title }}</v-list-tile-title> </v-list-tile-content> </v-list-tile> </v-list> </v-navigation-drawer> <v-toolbar fixed> <v-toolbar-side-icon @click.native.stop="toggleDrawer" /> <v-toolbar-title>{{ pageTitle }}</v-toolbar-title> <v-spacer></v-spacer> </v-toolbar> <main> <v-container fluid> <nuxt /> </v-container> </main> </v-app> </template> <script> import { mapState, mapMutations } from 'vuex' export default { methods: { ...mapMutations([ 'toggleDrawer' ]) }, computed: { ...mapState([ 'menu', 'drawer', 'pageTitle' ]) } } </script>

The console.log shows me that the state get updated, but as the state.drawer changes the component is not updated and the drawer remains present.

Any idea on what i'm doing wrong/how to tackle that issue? Thanks in advance

Seb

Below is link to jdfiddle that contains embedded code.

What i want to achieve is to load default form field values into vue object. The form fields do have some default values, but vue make them blank. how can I load the default form values in vue ? ( i cannot embed the values through direct vue object, as values are going to be dynamic, and javascript code will be placed in a special.js file).

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?