Software

I'm starting our unit test environment for our project, but we may have picked a combo that doesn't work well in a couple scenarios.

Our project runs under Meteor, the code for the UI is written in Vue and Coffeescript. The test environment we're trying to work with is Mocha & Chai. When I run the test suite, the command looks like this:

meteor test --once --driver-package=dispatch:mocha

From the examples around the internet, the following code should work:

const VueObject = Vue.extend(MyVueComponent); const VueInstance = new VueObject().$mount(); chai.assert.ok(VueInstance.$el.textContent);

From that point, I could ask $el all sorts of questions for my test, however $el is undefined. I even tried waiting by using Vue.nextTick() and it's still undefined. In the examples I've found, they often talk about using webpack, but I heard meteor doesn't like using webpack.

Does anyone have any suggestions? Did we pick a hard combination to work with?

I'm building a TabbedDetailView reusable component in vue. The idea is that the tab-detail component receives a list of objects which have a title and a component. It then does the logic so that when you click on a tab, then the component is loaded. The problem is that this components have a prop that is a user_id. How do I insert this prop into the components from outside of the template? For example (using single file vue components):

SomeComponent.vue

import Vue from 'vue'; import Component1 from '@/components/Component1'; const Componenet1Constructor = Vue.extend(Component1); export default { data() { return { tabs: [ {title: 'Componenent 1', detail: new Component1Constructor({propsData: {user_id: this.user_id}})} {title: 'Component 2', detail: Component2}, {title: 'Component 3', detail: Component3}, ], }; }, props: ['user_id'], } <template> <div> <tab-detail :tabs='tabs'></tab-detail> </div> </template> Component1.vue

export default { props: ['user_id'], }; <template> {{ user_id }} </template>

Running the above throws the error: [Vue warn]: Failed to mount component: template or render function not defined.

I am trying to learn how to build an app with Rails 5.1 with Vuejs, as generated via the Webpacker gem.

$ rails new myvueapp --webpack=vue

How do I pass instance variable data back an forth between the Vue components, to get my data in/out of the database?

Let's say for example that I have a User model with Username and Email fields. Is there a simple example of how to pass instance variable, @user, data from the controller to a component?

I believe there are two ways to do this:

(1) In the controller, has the render :json => @user and then use something like the fetch API or Axios to retrieve the data in the .vue component.

-or-

(2) Use the something like the example <%= javascript_pack_tag 'hello_vue' %> together with a <%= content_tag ... %> in a view.

When I do this <%= javascript_pack_tag 'hello_vue' %> example, I can see the "Hello Vue!" from the data in the component "message" variable, but am having trouble finding an example of instance variable data, eg: @user data, being passed in and out of Rails.

Any examples of how to pass @user data would be much appreciated.

Thank you.

I have problem with Event Handling in vue2 with Laravel 5.4 - nothing happen when i use click event on the button. No error or anything else.

My html (in fact its header.blade.php):

<div id="example"> <button v-on:click="exclick">Super btn</button> </div>

My js (app.js in resources/assets folder)

require('./bootstrap'); new Vue({ el: '#example', methods: { exclick: function (event) { alert("Log 1"); if (event) { alert("Log 2"); } } } }); const app = new Vue({ el: '#app' });

JS compiled by gulp

Please help!

I assumed that by refactoring all of the components in this large application into single-file Vue components, and using Webpack with Vue production runtime only, I could eliminate these deep call stacks of hundreds of nested calls that appear to be assembling a virtual DOM. It takes about 1500ms for all the scripting. If I comment out the reference to the root element (i.e. it doesn't bind), the scripting takes about 300ms. This seems expensive. The 'array' is by far the biggest part of the heap profile. Am I actually successfully pre-compiling?

I am starting a new app using Rails 5.1 and Vue.js, with the built-in Webpacker Vue.js pack (generated via the --webpack=vue flag).

I am trying to understand the pros & cons of using a normal Rails MVC app vs a Rails API app (generating a Rails app with the --api flag).

$ rails new someapp --webpack=vue vs. $ rails new someapp --api --webpack=vue

Given the fact that Rails API has been merged into core since 2015, and built-in Webpack via the Webpacker gem is brand new (Rails 5.1, 2017), what would be the best way to build a Rails app, where the frontend is going to be Vuejs? Or, mostly Vuejs?

Stick to regular Rails with Webpacker Vue, or Rails API with Webpacker Vue? And what are the tradeoffs?

Some of this answer will simply come down to a conversation about full-stack MVC apps vs SPA apps with API. However, are there any specific Rails Way +Vue.js components workflow things I should consider, beyond the "this is a question of an fullstack MVC app vs. a SPA app."

I want to note that I realize that the answers are going to be somewhat stylistic preference. Some might prefer one over the other.

Both will work, but I would like to think about ease of use, compatibility and trade-offs of doing it one way verse the other.

Thank you.

I have a almost vanilla instalation of Laravel. No matter what i do, all my scoped css inside the component is simply ignored and bootstrap-sass styles are applied instead.

How can i stop this from rappening?

I believe this issue is related to JS in general as opposed to VueJS. But I have the following Vue Method that returns a Firebase Call and returns the object asked for. This is working:

methods: { getSponsor (key) { db.ref('businesses').child(key).on('value', snap => { console.log(snap.val()) return snap.val() }) } }

[Object]

Now, when I call this method from a computed property, it results in undefined:

computed: { sponsor () { console.log(this.getSponsor(key)) return(this.getSponsor(key)) } }

Undefined

Why is this? Is it because of how I return my method?

I'd like to trigger the onAuthStateChanged-method of Firebase in my VueJS-Application.

Currently I am not able to stay logged in as a certain user, the onAuthStateChanged-method seems not to run.

my action is kicked off by ...

beforeCreate() { this.$store.dispatch('update_session') }

... in my main App-Component.

the mutation looks like:

update_session(state) { auth.onAuthStateChanged().then((user) => { if (user) { // USE USER KEY state.user.current.key = user.uid // USE USER ROLE users.child(state.user.current.key).on('value', (snapshot) => { state.user.current.role = snapshot.val().role }) } }) }

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