Software

i working for real-time notification .
notification send but not real-time i need to refresh page to enable receive

notification.vue

<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.'); Echo.private('App.User.' + this.userid) .notification((notification) => { console.log(asd); let newUnreadNotifications = {data: {thread: notification.thread, user: notification.user}}; this.unreadNotifications.push(newUnreadNotifications); }); } } </script> <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 :key="unread.id" v-for="unread in unreadNotifications" :unread="unread"></notification-item> </li> </ul> </li> </template>

script execute all but the following code not work

Echo.private('App.User.' + this.userid) .notification((notification) => { console.log(asd); let newUnreadNotifications = {data: {thread: notification.thread, user: notification.user}}; this.unreadNotifications.push(newUnreadNotifications); });

anyone can help plz ? i searched alot but not found solution ??

I'm using official vue-cli scaffolder and trying to include normalize.css in App.vue this way

<style scoped> @import "/node_modules/normalize.css/normalize.css"; .app { font-family: Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; max-width: 1000px; margin: auto; font-size: 16px; display: flex; align-items: center; justify-content: center; min-height: 100vh; } </style>

But after compiling css doesn't include in style tag or as external file:

So, how can I correctly include this or another css file?

Vue.js is a bit of a life style change for a sql programmer, but getting there. Here I use vuefire as per specs, even manually inserting the correct key from my one record, one field Firebase DB to test it out. Yet see nothing returned or displayed.

Love to know how to do that! And fill in my one value form. From there the sky's the limit I'm sure. Thanks for any help.

ERROR MESSAGE: vue.common.js?e881:481 [Vue warn]: Error in mounted hook: "ReferenceError: residentsArray is not defined"

<template> <div class="edit"> <div class="container"> <p style="margin-bottom:10px;font-weight:800;">EDIT RECORD</p><br> <form id="form" v-on:submit.prevent="updateResident"> <fieldset class="form-group"> <label for="first_name">Name</label> <input type="text" class="form-control" id="first_name" name="first_name" v-model="currentResident.name"> </fieldset> <input type="submit" class="btn btn-primary" value="Add New Resident"> </form> </div> </div> </template> <script> import firebase from 'firebase' let editConfig = { apiKey: "123456789", authDomain: "myapp.firebaseapp.com", databaseURL: "https://myapp.firebaseio.com", projectId: "my", storageBucket: "myapp.appspot.com", messagingSenderId: "1234567890" }; var firebaseApp = firebase.initializeApp(editConfig, "Edit") var db = firebaseApp.database() let residentsReference = db.ref('residents') export default { name: 'Edit', mounted() { this.currentResident.name = residentsArray.name; }, firebase: { residentsArray: residentsReference.child('-KpzkbA6G4XvEHHMb9H0') }, data () { return { currentResident: { name: '' } } }, methods: { updateResident: function () { // Update record here } } } </script>

I'm following the official example but I don't know why I get a blank page with this js error

vue-router.esm.js?fe87:10 Uncaught Error: [vue-router] "path" is required in a route configuration.

Here is my two pages:

/:language/bar /:language/foo +------------------+ +-----------------+ | +---------+ | | +---------+ | | | header | | | | header | | | +---------+ | | +---------+ | | +--------------+ | | +-------------+ | | | bar | | +------------> | | foo | | | | | | | | | | | +--------------+ | | +-------------+ | +------------------+ +-----------------+

And this is how I'm trying to do it.

My entrypoint js file:

import Vue from 'vue'; import router from './router'; // import some components let vm = new Vue({ el: '#app', router, components: {/*imported components*/}, }); vm.$language.current = vm.$route.params.language;

My entrypoint html

<body> <div id="app"> <!-- this is the header, the common part --> <navbar fullname=''></navbar> <router-view></router-view> </div> </body>

My router

import Vue from 'vue'; import Router from 'vue-router'; // import foo and bar components Vue.use(Router); let routes = [ { path: '/:language', name: 'homepage', children: [ { path: 'foo', component: Foo }, { path: 'bar', component: Bar }, ] } ]; export default new Router({routes,});

My foo component

<template> <div> <h1>FOO</h1> </div> </template> <script>export default {};</script>

How do I fix this error?

I'm developing my first app in vueJs and laravel. now I 'have a problem with v-model. I have a page with component Person that edit or create new Person. So I get from my backend in laravel or Model Person or new Person.

Now in my frontend I pass data to component by props:

Page.blade.php

<Person :person-data="{!! jsonToProp($person) !!}"></Person>

(jsonToProp transform model coming from backend in json) In this case, I would return new Model so without properties, so $person will be a empty object.

Person.vue

<template> <div> <label for="name_p"> Name</label> <input id="name_p" v-model="person.name" class="form-control" /> <button v-on:click="test()">test</button> {{person.name}} </div> </template> <script> export default { props: ['personData'], mounted() { }, data() { return { person: this.personData } }, methods:{ test(){ console.log(this.person.name); } } } </script>

Now if I change input with model v-model="person.name" I would print name in template but it doesn't change. But if I click buttonit console write right value. So I read that changing model value is asynch, so How I can render new Model when change input?

I am new to vuejs and I am having a query i.e. How can we get the href attribute value of a HTML variable.

<pre> var custompath = '<a id="myid" href="undefined111">a8AZCtgt</a>' </pre>

Thanks in advance

Im working on responsive Vue.js app with Uikit. I must create 2 menus - one for desktop version, one for mobile. So I must define same menu items 2 times, first for desktop links slot, second time for mobile. I dont want define it 2x. How can I deal with this problem elegantly? Any ideas?

<template id="app"> <app-layout> <template slot="navlinks-desktop"> <router-link to="/link1" tag="li" exact><a>Link 1</a></router-link> <router-link to="/link2" tag="li" exact><a>Link 2</a></router-link> </template> <template slot="navlinks-mobile"> <router-link to="/link1" tag="li" exact><a>Link 1</a></router-link> <router-link to="/link2" tag="li" exact><a>Link 2</a></router-link> </template> <transition name="fade" slot="content"> <router-view></router-view> </transition> <p slot="footer">Footer text</p> </app-layout> </template> <template id="app-layout"> <div class="main-container"> <header class="uk-margin-bottom"> <nav class="uk-navbar uk-navbar-attached"> <div class="uk-navbar-brand uk-hidden-small">My Application</div> <div class="uk-navbar-flip"> <ul class="uk-navbar-nav uk-hidden-small"> <slot name="navlinks-desktop"></slot> </ul> <div class="uk-navbar-toggle uk-button-dropdown uk-visible-small uk-dropdown-close" data-uk-dropdown="{mode: 'click'; justify: 'nav'}"> <div class="uk-dropdown uk-dropdown-navbar uk-dropdown-small"> <ul class="uk-nav uk-nav-dropdown"> <slot name="navlinks-mobile"></slot> </ul> </div> </div> </div> <div class="uk-navbar-brand uk-navbar-center uk-visible-small">My Application</div> </nav> </header> <div class="uk-container uk-container-center"> <main> <slot name="content"></slot> </main> </div> <footer class="uk-text-center fixed-bottom"> <slot name="footer"></slot> </footer> </div> </template>

I tried to implement this editor in my app. But I do not know how to retrieve the data with @change in my case. (3 editors on the same page).

My code:

<script src="http://tai.coding.me/vue-html5-editor/vue-html5-editor.js"></script> <link href="https://cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/> <script src="https://cdn.bootcss.com/vue/2.2.6/vue.js"></script> <body> <div id="app"> <div v-for="content in contents" > <p> <span style="white-space: nowrap">content {{content.id}}: {{content.area}}</span> </p> <vue-html5-editor :content="content.area" :height="300" :show-module-name="showModuleName" @change="updateData(content.id)" ref="editor"></vue-html5-editor> </div> <script> Vue.use(VueHtml5Editor, { showModuleName: false, image: { sizeLimit: 512 * 1024, compress: true, width: 500, height: 500, quality: 80 } }) new Vue({ el: "#app", data: { contents: [ {id: 1,area: "<h3>vue html5 editor</h3>"}, {id: 2,area: "<h3>vue html5 editor</h3>"}, {id: 3,area: "<h3>vue html5 editor</h3>"} ], showModuleName: false, }, methods: { updateData: function (id,data) { // sync toto to component this.contents[id-1].area = data; } } }) </script> </body>

How does the first "updateData" work? How can I implement it in my code?

I'm using laravel 5.4, with webpack and vue. I'm not sure how to add new libraries to use in vue.

For example, I run

npm install --save jquery vue2-select

What do I need to do next? I need to add:

Import Selectize from 'vue2-selectize'

or

Require ('vue2-selectize')

In the

resources / assets / js / app.js

file or

resources / assets / js / bootstrap.js

?

Can someone help me with the correct order to work?

Thank you!

Here is how i use my custom components in my html

<custom-input v-model="person.name" :title="'Person Name'"> </custom-input> <custom-select v-model="person.country" :options="countryList" :title="'Country'"> </custom-select>

What i want is to generate these 2 components with all the attributes using json schema and bind the v-model to another json schema. So i can iterate the json array which defines what component tag is what attributes it should have etc etc. and then bind the v-model to a data schema from the second json schema. I'm thinking about a proxyComponent that renders them but it will become too complicated since some components dont have v-model, instead they have @input event listener for their value

Json model data:

{ person: { name: '', country: '', }, }

Json schema which defines the components

[ { tag: 'custom-input', attributes: { vModel: 'person.name', title: 'Person Name', }, }, { tag: 'custom-select', attributes: { vModel: 'person.country', options: 'countryList', title: 'Country', }, }, ]

I am wondering that what is a proper way to deal with props in Vue.js if the prop is from the response of backend?

Ok, let's say the child component has a prop called person. a name is in person object.

<template> {{ person.name }} <template> <script> export default { name: 'ChildComponent', props:['person'], created(){ this.getName(); }, data(){return{name:''}}, methods:{ getName(){ this.name = this.person.name; } } </script>

The parent component is like this

<template> <ChildComponent :person="person"></ChildComponent> <template> <script> export default { name: 'ParentComponent', created(){ this.getPerson(); } data(){ return { person: null } }, methods:{getPerson(){ // send request to server or api then update name sendrequest().then(person => { this.person = person}); }} </script>

At first, before the get the response, there will be a warning can't get name from person. I know 2 methods to handle this:

1. <ChildComponent :person="person" v-if="person"></ChildComponent>
2. watch person prop in, every time the person is changed, rerun the getName() method in childcomponent or set name as a computed attribute.

So here is the question again, are they the proper way to handle this? Is there still some other methods like using Vuex?

Thx

I am attempting to read a variable from within the data object of a Vue component.

This is the Vue template I'm using

<template> <section> <b-field label="Username"> <b-input v-model="username"></b-input> </b-field> <b-field label="Password"> <b-input type="password" password-reveal v-model="password"></b-input> </b-field> <b-field label="Engineer number"> <b-input type="number" v-model="engineer"></b-input> </b-field> <a class="button" @click="send_login">Login</a> </section> </template> <script> import {socket} from './../../main.js' export default { data() { return { username: '', password: '', engineer: '', } }, methods: { send_login: () => { console.log(this.engineer) } } } </script>

this.engineer always print undefined.

If I wasn't using the template files then this works

let login = new Vue({ el: '#loginApp', data: { username: '', password: '', engineer: '', }, methods: { login: () => { console.log(login.engineer); }, }, });

Any ideas on what I'm doing wrong?

I have a vuex store and i'd like to apply code splitting on it.

Following this tutorial I tried this:

import Vuex from 'vuex' import Vue from 'vue' import createLogger from 'vuex/dist/logger' Vue.use(Vuex) const debug = process.env.NODE_ENV !== 'production' const store = new Vuex.Store({ strict: debug, plugins: debug ? [createLogger] : [], state: { loading: false }, mutations: { toggleLoading: (state) => { state.loading = !state.loading } }, getters: { loading: state => state.loading }, actions: { toggleLoading: ({commit}) => { commit('toggleLoading') } } }) import('./modules/userModule').then(userModule => { store.registerModule('user', userModule) }) import('./modules/tenantsModule').then(tenantsModule => { store.registerModule('tenants', tenantsModule) }) import('./modules/updatesModule').then(updatesModule => { store.registerModule('updates', updatesModule) }) export default store

But the application fails :

webpack-internal:///24:739 [vuex] unknown getter: user

What am i doing wrong?

I have a tiny vue app where I'm wanting to use vue-resource to request an api endpoint.

1. I've installed vue-resource via npm
2. I've added the Vue.use(VueResource) lines to my bootstrap file
3. I've setup my component like this to call the .get method

Blog.vue

... mounted () { this.fetchPosts() }, methods: { fetchPosts: () => { debugger; this.$http.get('my-url') .then(response => { console.log(response) }) } } ...

I've seen a few github issues and SO posts which touch on this type of problem but most seem to relate to incorrect configuration which I don't think I have (happy to be proven wrong!)

The specific console error I get is:

Error in mounted hook: "TypeError: Cannot read property 'get' of undefined"

What's odd about this is that if you see my debugger line, if I console.log this.$http.get at that point I get:

function (url, options$$1) { return this(assign(options$$1 || {}, {url: url, method: method$$1})); }

If I let the code run and then attempt the console.log afterwards I get:

Cannot read property 'get' of undefined

As a result I presume it's some kind of this context issue, but from what I can see the reference should be correct...shouldn't it?

My state is inter-dependent with another, something like this: https://jsfiddle.net/MagicMagnate/1zufrspx/

const store = new Vuex.Store({ state: { checkedNames: ['Jack', 'Mike'], interlockedState : 'foo' }, mutations: { updateChecked(state, payload) { state.checkedNames = payload state.interlockedState = 'bar' //trying to set the state but failed } }, actions: { updateChecked({ commit }, payload) { commit('updateChecked', payload) } } }) new Vue({ store, el: '#example', //data: {interlockedState:'foo'}, computed: { checkedNames: { get() { return this.$store.state.checkedNames }, set(str) { this.$store.dispatch('updateChecked', str) } } } })

Only more complex with case and if else, I know I shouldn't mutate directly from state directly, but I'm running out idea on how to assign a new value to state to mutate so those two states aren't interlocked with each other.

I'm having some issues using the babel-loader plugin in conjunction with uglifyJS. I'm no expert here, but it seems like my ES6 is not being transpiled to es5 correctly.

Contents of my webpack.production.js file:

var path = require("path"); var ExtractTextPlugin = require("extract-text-webpack-plugin"); var extractSass = new ExtractTextPlugin({ filename: "[name].[contenthash].css", disable: true }); var webpack = require("webpack"); module.exports = { entry: ['babel-polyfill', './assets/js/app.js'], output: { path: path.resolve(__dirname, "dist"), //publicPath: "/assets/", filename: 'bundle.js' }, //devtool:'source-map', module : { loaders: [ { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader', query: { presets: ['es2015'] } } ], rules: [ { test: /\.html/, use: [{ loader: "html-loader" }] }, { test: /\.scss$/, loader: extractSass.extract({ use: [{ loader: "css-loader", options: { sourceMap : true} }, { loader: "sass-loader", options: { sourceMap : true} }], // use style-loader in development fallback: "style-loader" }) } ] }, resolve: { mainFields: ['browserify', 'browser', 'module', 'main'] }, plugins: [ new webpack.DefinePlugin({ 'process.env': { NODE_ENV: '"production"' } }), extractSass, new webpack.optimize.UglifyJsPlugin({minimize: true}) ] };

My package.json:

{ "name": "mobiile-app-template", "version": "1.0.0", "description": "A single page app template", "main": "app.js", "scripts": { "babel": "babel --presets es2015 js/main.js -o build/main.bundle.js", "dev": "webpack-dev-server --inline --hot --host=127.0.0.1", "build": "cross-env NODE_ENV=production webpack --progress --hide-modules --config webpack.production.config.js", "predeploy": "npm run build", "deploy": "surge --project . --domain skyy-ba.surge.sh" }, "dependencies": { "axios": "^0.16.2", "babel-polyfill": "^6.23.0", "babel-runtime": "^6.23.0", "html-loader": "^0.4.4", "jwt-decode": "^2.2.0", "vee-validate": "^2.0.0-rc.5", "vue": "^2.1.3", "vue-carousel": "^0.6.4", "vue-router": "^2.5.3", "vue-simple-spinner": "^1.2.1", "vue-simple-upload": "^0.1.6", "vue-spinner": "^1.0.2", "vuex": "^2.3.1" }, "author": "", "license": "ISC", "devDependencies": { "babel-core": "^6.24.1", "babel-loader": "^7.0.0", "babel-plugin-transform-runtime": "^6.23.0", "babel-preset-es2015": "^6.24.1", "copy-webpack-plugin": "^4.0.1", "cross-env": "^1.0.6", "css-loader": "^0.26.4", "extract-text-webpack-plugin": "^2.1.0", "node-sass": "^4.5.0", "sass-loader": "^6.0.3", "style-loader": "^0.13.2", "surge": "^0.18.0", "webpack": "^2.5.1", "webpack-dev-server": "^2.4.1" } }

Anyone have any ideas? Tried so many different solutions with no luck so far :-(

I have been working with Vue.js and Vuetify recently and I am now trying to implement a mobile first app.

In this SPA, I display a list of items. I would like these items to be displayed in a grid when the screen is wide enough and as a regular list when the screen is smaller.

For that, I followed the example here.

#example-5 { color: #fff; text-align: center; } #example-5 .card { margin-bottom: 16px; } <link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet" type="text/css"> <script src="https://unpkg.com/vue/dist/vue.js"></script> <link href="https://unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet" type="text/css"> <script src="https://unpkg.com/vuetify/dist/vuetify.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.common.js"></script> <div id="example-5"> <v-layout row-md column child-flex-md> <v-card dark class="primary ma-1"> <v-card-text>one</v-card-text> </v-card> <v-card dark class="secondary ma-1"> <v-card-text>two</v-card-text> </v-card> <v-card dark class="accent ma-1"> <v-card-text>three</v-card-text> </v-card> </v-layout> </div>

While this has the intended effect, I noticed that it changes between one item or three items. There is in "in between" where there are two items on the first row and only one item on the last row.

Do you have any tips on how to achieve this effect?

Is there a way in the Vuetify grid system to change the resize step to be in increments of one addition item per row instead of the current behaviour?

Thanks for your help!

I am getting the error from the title:

Uncaught TypeError: cloned[i].apply is not a function at HTMLInputElement.invoker (vue.esm.js?65d7:1810)

Made standard setup with vue-cli (simple webpack), and this is my component:

<template> <div class="column is-4"> <nav class="panel"> <p class="panel-heading"> Authors in our library </p> <div class="panel-block"> <p class="control has-icons-left"> <input class="input is-small" type="text" placeholder="Search" v-model="search" @keyup="filterAuthors"> <span class="icon is-small is-left"> <i class="fa fa-search"></i> </span> </p> </div> <a class="panel-block is-active" v-for="author in filterAuthors"> <span class="panel-icon"> <i class="fa fa-book"></i> </span> {{ author }} </a> </nav> </div> </template> <script> export default { data () { return { 'search' : '' } }, computed: { filterAuthors() { let search = this.search.toLowerCase(); return this.$store.state.authors.filter((author) => { return author.toLowerCase().indexOf(search) >= 0; }) } } } </script>

Strange part is that the filter is working, but every time I type into the input field, I get this error. Anyone have any idea what can it be?

I have a plugin that adds some property to Vue instance.
Then I can access this property inside components using this.$plugin.prop. How can I watch for its changes? I need to do something inside component based on this.$plugin.prop value but neither watch or this.$watch worked for me. I assume its because watch works in component context so I can't watch for variable outside component, for example

mounted() { this.$watch('$plugin.prop', val => console.log(val)); }

doesn't work.
What is the right way to accomplish this?

I have a component (modal) which relies on a store. The store has the state of the modal component - whether it is active or not.

I need to be able to call this modal to open from other components or even just on a standard link. It opens by adding an .active class.

How can I change the state of the store - either by calling the stores action or calling the modal components method (which is mapped to the store).

Modal Store:

class ModalModule { constructor() { return { namespaced: true, state: { active: false, }, mutations: { toggleActive: (state) => { return state.active = ! state.active; }, }, actions: { toggleActive({ commit }) { commit('toggleActive'); }, }, getters: { active: state => { return state.active; } } }; } } export default ModalModule;

Vue Component:

<template> <div class="modal" v-bind:class="{ active: active }"> <div class="modal-inner"> <h1>modal content here</h1> </div> <div class="modal-close" v-on:click="this.toggleActive"> X </div> </div> </template> <script> import { mapGetters, mapActions } from 'vuex'; export default { computed: { ...mapGetters('Modal', [ 'active', ]) }, methods: { ...mapActions('Modal', [ 'toggleActive', ]), } } </script>

And somewhere else I want to be able to have something like:

<button v-on:click="how to change the state??">OPEN MODAL</button>