Software

I have defined some data in Vue() instance, but when I use the data, I receive this message:

Property or method "url" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

This is where the data locate:

Vue.component('app-dashboard', require('./components/AppDashboard.vue')); Vue.component('header-top', require('./components/Header.vue')); Vue.component('navbox', require('./components/Navbox.vue')); Vue.component(Vodal.name, Vodal); const app = new Vue({ el: '#app', data: { url: { dashboard: laroute.route('dashboard'), request: laroute.route('requests.get'), send: laroute.route('requests.send'), history: laroute.route('history'), userAll: laroute.route('users.all') } } });

This is how I use the data in my component:

// Header.vue <li class="nav-item active"> <a class="nav-link" :href="url.dashboard">Dashboard <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" :href="url.request">File Request</a> </li> <li class="nav-item"> <a class="nav-link" :href="url.send">Send Files</a> </li> <li class="nav-item"> <a class="nav-link" :href="url.history">History</a> </li> <li class="nav-item"> <a class="nav-link" :href="url.userAll">User Management</a> </li>

After saving the data to database, I pushed $message->user = Auth::user()->name and return the $message. It returns the right object. I just expecting that the user is inserted in message.

{ "message": { "id": 46, "channel": 1, "by": 1, "body": "saddla", "created_at": "2017-07-25 18:46:31", "updated_at": "2017-07-25 18:46:31", "user": "Clyde Santiago" } }

But when passing the $message to Pusher, it only returns the original object. Not including the user. Here's the data in debug console in pusher

{ "message": { "id": 46, "channel": 1, "by": 1, "body": "saddla", "created_at": "2017-07-25 18:46:31", "updated_at": "2017-07-25 18:46:31" } }

This is my MessageController

<?php namespace App\Http\Controllers; use Illuminate\Http\Request; use App\Message; use Illuminate\Support\Facades\Auth; use App\Events\Chat; class MessageController extends Controller { public function create(Request $request){ $message = new Message; $message->channel = $request->channel_id; $message->by = Auth::user()->id; $message->body = $request->message; $message->save(); $message->user = Auth::user()->name; event(new Chat($message)); return $message; } }

In Vue.js, I can bind an image to an img element:

<img v-bind:src="myimage" />

How can I define another image that is displayed when the mouse moves over this image?

I don't understand why I cant access the data inside the "user"

{ "channel_id": 2, "user": { "id": 1, "name": "Clyde Santiago", "email": "dexterdev02@gmail.com", "created_at": "2017-07-25 08:10:58", "updated_at": "2017-07-25 08:10:58" }, "message": "ssd" }

Accessing the "channel_id", "user", "message" is fine. But when I access the data in the "user" it shows error. Here's the HTML in my vue component

<ul class="list-group"> <li class="list-group-item" v-for="conversation in conversations"> <p> {{conversation.message}} </p> <small>{{conversation.user}}</small> </li> </ul>

This is my first project using Vuejs.

I've got my main component. In my main component I've got a data variable that is an array. For example:

export default { name: 'example-component', data() { return { options: [ { text: { nl: 'Jan', en: 'John', }, action: 'x1', },{ text: { nl: 'Jansen', en: 'Doe', }, action: 'x2', }, ], } }, }

In my template for this <example-component> I'm using a v-for loop inside of another component. Like shown below:

<my-other-component v-for="option in options" v-on:click.native="select(option.action)" :key="option.id"></my-other-component>

This seems to work fine.

<my-other-component> has an animation for when it appears on the screen for the first time.

In the methods section of my example-component there's a method that sometimes empties the options array and re-populates it, with different objects, of course. If this method were to run now, the first two options would not have this animation, but a third, fourth, fifth, etc would.

So it appears as though this animation would trigger upon the first creation of a specific index in the option array.

Does anyone know why this is and how I could fix this issue?

PS: My (relevant) CSS (sass):

.option animation-timing-function: linear animation-name: messagepop2 animation-duration: 2.5s @-webkit-keyframes messagepop2 0% opacity: 0 75% opacity: 0 100% opacity: 1

Vue.js documentation for Scoped CSS mentions that

You can include both scoped and non-scoped styles in the same component

I built the example application for vue-router and used two single file components instead of the string templates of the example - the rendering is as expected.

I then tried to apply both scoped and non-scoped styles in the components. In the first one I have

<style scoped> div { color: white; background-color: blue; } </style> <style> body { background-color: green; } </style>

and the second one

<style scoped> div { color: white; background-color: red; } </style> <style> body { background-color: yellow; } </style>

The idea is to have the whole body background switch when choosing a specific route.

The scoped styles are OK - they change depending on the route.

The non-scoped ones do not:

• on initial application load (non routed yet) the background is white (which is OK - this is the default one and there is no route for /).
• when choosing a route, the style for the body is applied correctly (say, green from the first component)
• when switching routes and loading the second component the background does not change. All the other components elements are correctly rendered (content and scoped styling)
• further switches keep the same once-defined background (and again, other elements of the relevant component are rendered correctly).

In other words, the choice of the first route (and its component) seem to determine for good the non-scoped style, which is not modified when switching components. Is this expected behaviour?

I have a Vuex instance with a couple variables:

const store = new Vuex.Store({ state: { start_date: moment().startOf('year').format("MM/DD/YYYY"), end_date: moment().format("MM/DD/YYYY") }, mutations: { changeDate(state, date_obj) { state.start_date = date_obj.start_date state.end_date = date_obj.end_date } } })

and I have my main Vue instance where the date properties are inherited from the store:

var employees = new Vue({ el: '#employees', computed: { start_date() { return store.state.start_date }, end_date() { return store.state.end_date }, leads() { let filter_obj = { start_date: this.start_date, end_date: this.end_date } return this.fetch('potential_clients', filter_obj) } }, methods: { fetch(model, args=null) { return new Promise((resolve, reject) => { console.log(resolve, reject) let url = "/" + model + ".json" console.log(url); $.ajax({ url: url, data: args, success: ((res) => { console.log(res) this[model] = res; resolve(res) }), error: ((res) => { reject(res) }), complete: (() => {}) }) }) } }, mounted() { this.fetch('potential_clients') } });

and I initially call this.fetch('potential_clients') without any extra arguments, however once the value for start_date and end_date are changed, I want to call something like leads() above. However nothing changes when I change the values of start_date and end_date.

It might be worth noting that when I inspect in Chrome with the Vue plugin, and click on the root component, all of a sudden the changes show in the view? very odd

How can I pass data from my vue component into a store?

Here's my component:

methods: { ...mapActions('NavBar', [ 'fix', ]), onClick: function() { this.fix('my-data'); }, ....

And on the store:

actions: { fix: ({ commit }) => { //get data here? }, },

I'm new on VUEjs, I'm trying to create my first app. Now I would show confirm message after every click on buttons. Example:

<button class="btn btn-danger" v-on:click="reject(proposal)">reject</button>

My question is: Can I extends v-on:click event To show the confirm everywhere? Example I would make my custom directive called: v-confirm-click that first execute confirm and then if I click on "ok" execute click event, It's possible?

I was wondering how you would make a javascript template like this reactive:

<div>Hello {{ name }}!</div>

I know about how to observe a property using Object.defineProperty -> get() to listen to changes, but I wonder how to make this reactive. Lets say I get notified of a change for the name variable, and I want to update the div, it doesn't work to put node.textContent = app.data.name; for example because then I would remove the Hello ! part. How do frameworks like angular and vuejs manage this?

I am experimenting with single file .vue components and my first successful build surprised me with the scope of the component style. Generally speaking, I was under the impression that single file components would be self-contained, including the scope of their components.

The component .vue file is

<template> <div> Hello {{who}} </div> </template> <script> module.exports = { data: function () { return { who: "John" } } } </script> <style> div { color: white; background-color: blue; } </style>

It is built via webpackthough the following webpack.config.js

module.exports = { entry: './entry.js', output: { filename: 'bundle.js' }, devServer: { inline: true }, module: { rules: [{ test: /\.vue$/, loader: 'vue-loader' }] } }

and the entry.js

import Vue from 'vue/dist/vue.js' import ComponentOne from './component1.vue' //Vue.component('component-one', ComponentOne) new Vue({ el: "#time", data: { greetings: "bonjour" }, components: { ComponentOne } })

The HTML file binding all together is

<!DOCTYPE html> <html lang="en"> <body> Greetings: <div id="time"> {{greetings}} <component-one></component-one> </div> <script src='bundle.js'></script> </body> </html>

The rendered result is

The style definitions from component-one for div are also applied to the parent div (with id=time). Is this expected behaviour? Shouldn't the styling be confined to the component?

Note: I can assign an id to the div in my component's template and would therefore contain the styling - my question is about why this behaviour is expected in the context of components self-containement.

Context

I'm building a VueJS app and I would like to push it in production. I've generated files using npm run build and I've uploaded those on a server (IIS).

I have a lot of other applications on this server and I can't change how it works.

Here is a fake example to help me explain my issue:

mydomain.com/app1 will redirect to a web-app under a folder app1. To add my VueJS project I've created a new folder - lets say vueapp - and I get access it via mydomain.com/vueapp.

The thing is : the static paths generated by vue are not prefixed by vueapp. Paths in index.html are not like I want : I get mydomain.com/static/** instead of mydomaim.com/vueapp/static/** for a vue request.

I would like to tell webpack to prefix index.html's path by something but I can't get it work.

assetsSubDirectory

config/build.js gives us the possibility to change the assets sub directory (which is static by default). So I can set it to vueappPrefix/static but of course, this doesn't work.

• expected: mydomain.com/vueapp/vueappPrefix/static/*
• what I get: mydomain.com/vueappPrefix/static

This is obvious.

Of course I can edit index.html by hand or add a script to do it but I would like to know if there is a cleaner way to do this.

Thanks a lot.

I have a vue instance that passes an object to a child component. The child component has a checkbox that when clicked calls an event that the vue instance handles to update the object on the parent that is passed to the child component. Based on the vue documentation I thought this would cause the child component to update the related fields. However, the date field is not updating as I would expect when I click on the checkbox. In the image below, when I check the Management Name checkbox, I would expect the current day to appear, but I am not seeing any date. What am I missing here?

Design

Parent Instance new Vue({ el: "#evaluations-app", data: { evaluation: new Evaluation() }, methods: { updateEmployeeSO: function (newSO, newSODate) { this.evaluation.EmployeeSO = newSO; this.evaluation.EmployeeSODate = newSODate; }, updateReviewerSO: function (newSO, newSODate) { this.evaluation.ReviewerSO = newSO; this.evaluation.ReviewerSODate = newSODate; }, updateManagementSO: function (newSO, newSODate) { this.evaluation.ManagementSO = newSO; this.evaluation.ManagementSODate = newSODate; } }); Child Component Vue.component('sign-off', { props: ['initEvaluation', 'perspective'], template: ` <div class="sign-off-comp"> <div class="sign-off-item"> <div class="sign-off-field-1 col-1">{{evaluation.EmployeeName}}</div> <input :disabled="!enableEmployeeSO" v-model="evaluation.EmployeeSO" class="sign-off-field-2 col-2" type="checkbox" @click="EmployeeSOChanged"/> <div class="sign-off-field-3 col-3">{{employeeSODate}}</div> </div> <div class="sign-off-item"> <div class="sign-off-field-1 col-1">{{evaluation.ReviewerName}}</div> <input :disabled="!enableReviewerSO" v-model="evaluation.ReviewerSO" class="sign-off-field-2 col-2" type="checkbox" @click="ReviewerSOChanged"/> <div class="sign-off-field-3 col-3">{{reviewerSODate}}</div> </div> <div class="sign-off-item"> <div class="sign-off-field-1 col-1">{{evaluation.ManagementName}}</div> <input :disabled="!enableManagementSO" v-model="evaluation.ManagementSO" class="sign-off-field-2 col-2" type="checkbox" @click="ManagementSOChanged"/> <div class="sign-off-field-3 col-3">{{managementSODate}}</div> </div> </div> `, data: function () { return { evaluation: this.initEvaluation, employeeClicked: false, reviewerClicked: false, managementClicked: false, currentCommentSource: this.perspective } }, methods: { EmployeeSOChanged: function () { this.employeeClicked = true; //this.evaluation.EmployeeSODate == null || this.evaluation.EmployeeSODate == "" ? this.evaluation.EmployeeSODate = Helpers.getCurrentDate() : this.evaluation.EmployeeSODate = ""; this.$emit('employee-so-changed', this.evaluation.EmployeeSO, this.evaluation.EmployeeSODate); }, ReviewerSOChanged: function () { this.reviewerClicked = true; //this.evaluation.ReviewerSODate == null || this.evaluation.ReviewerSODate == "" ? this.evaluation.ReviewerSODate = Helpers.getCurrentDate() : this.evaluation.ReviewerSODate = ""; this.$emit('reviewer-so-changed', this.evaluation.ReviewerSO, this.evaluation.ReviewerSODate); }, ManagementSOChanged: function () { this.managementClicked = true; //this.evaluation.ManagementSODate == null || this.evaluation.ManagementSODate == "" ? this.evaluation.ManagementSODate = Helpers.getCurrentDate() : this.evaluation.ManagementSODate = ""; this.$emit('management-so-changed', this.evaluation.ManagementSO, this.evaluation.ManagementSODate == null || this.evaluation.ManagementSODate == "" ? Helpers.getCurrentDate() : ""); } }, computed: { enableEmployeeSO: function () { return (this.perspective == "Employee" && !this.evaluation.EmployeeSO) || this.employeeClicked; }, enableReviewerSO: function () { return (this.perspective == "Reviewer" && !this.evaluation.ReviewerSO && this.evaluation.EmployeeSO) || this.reviewerClicked; }, enableManagementSO: function () { return (this.perspective == "Management" && !this.evaluation.ManagementSO && this.evaluation.ReviewerSO && this.evaluation.EmployeeSO) || this.managementClicked; }, employeeSODate: function () { return this.evaluation.EmployeeSODate != null && this.evaluation.EmployeeSODate == new Date("01-01-1900") ? "" : this.evaluation.EmployeeSODate != null && this.evaluation.EmployeeSODate.length >= 10 ? this.evaluation.EmployeeSODate.substring(0, 10) : this.evaluation.EmployeeSODate; }, reviewerSODate: function () { return this.evaluation.ReviewerSODate != null && this.evaluation.ReviewerSODate == new Date("01-01-1900") ? "" : this.evaluation.ReviewerSODate != null && this.evaluation.ReviewerSODate.length >= 10 ? this.evaluation.ReviewerSODate.substring(0, 10) : this.evaluation.ReviewerSODate; }, managementSODate: function () { return this.evaluation.ManagementSODate != null && this.evaluation.ManagementSODate == new Date("01-01-1900") ? "" : this.evaluation.ManagementSODate != null && this.evaluation.ManagementSODate.length >= 10 ? this.evaluation.ManagementSODate.substring(0, 10) : this.evaluation.ManagementSODate; } } }); Model export class Evaluation { private _EmployeeName: string; private _EmployeeSO: boolean; private _EmployeeSODate: Date; private _ReviewerName: string; private _ReviewerSO: boolean; private _ReviewerSODate: Date; private _ManagementReviewerName: string; private _ManagementReviewerSO: boolean; private _ManagementReviewerSODate: Date; constructor() { this._EmployeeName = ""; this._EmployeeSO = false; this._EmployeeSODate = new Date("01-01-1900"); this._ReviewerName = ""; this._ReviewerSO = false; this._ReviewerSODate = new Date("01-01-1900"); this._ManagementReviewerName = ""; this._ManagementReviewerSO = false; this._ManagementReviewerSODate = new Date("01-01-1900"); } get EmployeeName(): string { return this._EmployeeName; } set EmployeeName(employeeName: string) { if (this._EmployeeName != employeeName) { this._EmployeeName = employeeName; } } get EmployeeSO(): boolean { return this._EmployeeSO; } set EmployeeSO(employeeSO: boolean) { if (this._EmployeeSO != employeeSO) { this._EmployeeSO = employeeSO; } } get EmployeeSODate(): Date { return this._EmployeeSODate; } set EmployeeSODate(employeeSODate: Date) { if (this._EmployeeSODate != employeeSODate) { this._EmployeeSODate = employeeSODate; } } get ReviewerName(): string { return this._ReviewerName; } set ReviewerName(reviewerName: string) { if (this._ReviewerName != reviewerName) { this._ReviewerName = reviewerName; } } get ReviewerSO(): boolean { return this._ReviewerSO; } set ReviewerSO(reviewerSO: boolean) { if (this._ReviewerSO != reviewerSO) { this._ReviewerSO = reviewerSO; } } get ReviewerSODate(): Date { return this._ReviewerSODate; } set ReviewerSODate(reviewerSODate: Date) { if (this._ReviewerSODate != reviewerSODate) { this._ReviewerSODate = reviewerSODate; } } get ManagementReviewerName(): string { return this._ManagementReviewerName; } set ManagementReviewerName(managementReviewerName: string) { if (this._ManagementReviewerName != managementReviewerName) { this._ManagementReviewerName = managementReviewerName; } } get ManagementReviewerSO(): boolean { return this._ManagementReviewerSO; } set ManagementReviewerSO(managementReviewerSO: boolean) { if (this._ManagementReviewerSO != managementReviewerSO) { this._ManagementReviewerSO = managementReviewerSO; } } get ManagementReviewerSODate(): Date { return this._ManagementReviewerSODate; } set ManagementReviewerSODate(managementReviewerSODate: Date) { if (this._ManagementReviewerSODate != managementReviewerSODate) { this._ManagementReviewerSODate = managementReviewerSODate; } } }

I'm trying to do an accordion-type transition component in a table VUE component. The problem is that with display: none; can't be calculate the height before applying the transition. JQuery does, but I can't reproduce it with pure javascript. Any CSS / JS guru that can help me?

Core of the transition:

methods: { beforeEnter (el) { const heightNeeded = el.scrollHeight el.classList.remove('collapse') el.style.display = 'table-row' el.classList.add('collapsing') el.style.height = heightNeeded + 'px' }, afterEnter (el) { el.classList.remove('collapsing') el.classList.add('collapse', 'in') }, beforeLeave (el) { el.classList.add('collapsing') el.classList.remove('collapse', 'in') el.style.height = 0 }, afterLeave (el) { el.classList.remove('collapsing') el.classList.add('collapse') el.style.display = 'table-row' } }

Complete Fiddle

Desired Result of the effect

I am trying to replicate a tutorial on vuecasts (https://laracasts.com/series/learn-vue-2-step-by-step/episodes/18).

Everything looks fine and I don't get any errors except a warning:

Resource interpreted as Document but transferred with MIME type application/json: "http://vueme.app:8000/skills"

web.php:

Route::get('/', function () { return view('welcome'); }); Route::get('skills', function(){ return ['javascript', 'php', 'python']; });

welcome.blade.php:

<!doctype html> <html lang="{{ app()->getLocale() }}"> <head> <meta charset="utf-8"> <title>Laravel</title> </head> <body> <div id="root"> <ul> <li v-for="skill in skills" v-text="skill"></li> </ul> </div> <script scr="https://unpkg.com/axios/dist/axios.min.js"></script> <script scr="https://unpkg.com/vue"></script> <script scr="/js/app.js"></script> </body> </html>

app.js:

new Vue({ el: '#root', data:{ skills:[] }, mounted(){ axios.get('/skills').then(response => this.skills = response.data); } });

What's not working?

I am using vibed.org that use Pub-based HTML preprocessor. The generated page is look like:

<!DOCTYPE html> <html> <head> <script src="https://unpkg.com/vue"></script><script src="https://cdn.jsdelivr.net/npm/vue-resource@1.3.4"></script> <link rel="stylesheet" type="text/css" href="site.css"/> <title>Hello, World</title> </head> <body> <div id="app"> {{message}} <div class="MainContainer"> <div class="LeftSide">44</div> <div class="RightSide"> <button @click="LoadData()">LoadData</button> </div> </div> </div> <script src="app.js"></script> </body> </html>

app.js:

document.ready= function() { var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' }, methods: { LoadData: function() { console.log('Hello'); } } }); app.$mount('#app'); }

My page in browser looks like:

So message is rending correctly. But when I am clicking on button I am getting error: vue@2.4.2:485 [Vue warn]: Property or method "LoadData" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

I'm trying to implement custom google maps markers with vue.js; based on this document to add custom marker on map it's require to define subclass of new google.maps.OverlayView() with prototype inheritance.

How could I inherit my vue.js component from it. when I do something like:

let Marker1 = Vue.component('marker1', { ... }) Marker1.prototype = new google.maps.OverlayView();

it's fails with exception:

Uncaught TypeError: this._init is not a function

I need a function to run initially and then to rerun at 12pm and 12am. I'm using VueJS if that has any influence.

fetch_datetime() { axios.get('/api/core/datetime').then((response) => { this.datetime = response.data; this.set_interval(); }); }, set_interval() { var current_date = new Date(); var hours = current_date.getHours(); var minutes = current_date.getMinutes(); var seconds = current_date.getSeconds(); if(hours == 12 && minutes == 0 && seconds == 0 || hours == 0 && minutes == 0 && seconds == 0) { this.fetch_datetime(); } else { if(hours >= 12) { setTimeout(this.fetch_datetime, (1000 * (60 - seconds) * (60 - minutes)) + (1000 * 60 * (24 - hours - 1) * 60)); } else { setTimeout(this.fetch_datetime, (1000 * (60 - seconds) * (60 - minutes)) + (1000 * 60 * (12 - hours - 1) * 60)); } }

However this isn't working as expected and the function runs early and then runs multiple times on the hour.

I am using Vuetify and using the tabs component. However, when I put v-text-field inside a one of the tabs. Load the page up first time you click on the text field then it highlights properly and is bound. Click on the link to go to tab 2 then click back to 1 and the input will disappear. Then cycle through again and the input is back but unbound and unformatted. Does anyone have any idea how to to keep it bound?

This is the code pen https://codepen.io/jakemcallister/pen/rzaLRK

Bellow is the code: JS

var demo = new Vue({ el: '#demo', data: { title: 'Demo', current_object: { name: 'Hello' } } })

HTML:

<div id="demo" v-cloak> <h1>{{title | uppercase}}</h1> <v-tabs light :scrollable="false" transition="none"> <v-tabs-bar slot="activators" class="grey lighten-3 light"> <v-tabs-slider class="light-blue darken-4"></v-tabs-slider> <v-tabs-item key="details" href="#details"> details </v-tabs-item> <v-tabs-item key="users" href="#users"> users </v-tabs-item> </v-tabs-bar> <v-tabs-content key="details" id='details' transition="none"> <v-card flat> <v-container fluid > tab 1 <v-layout row> <v-flex xs2><v-subheader>Name</v-subheader></v-flex> <v-flex xs4><v-text-field v-model="current_object.name" single-line key='company-name'></v-text-field></v-flex> </v-layout> </v-container> </v-card> </v-tabs-content> <v-tabs-content key="users" id='users' transition="none"> <v-card flat> tab 2 </v-card> </v-tabs-content> </v-tabs> </div>

I faced problem in a vue.js SPA project when upload in a server.

When I run npm run dev it works properly but after I run npm run build and upload to server then the project has blank page. But the favicon and title work fine. When I run npm run build got this message

"Tip: built files are meant to be served over an HTTP server. Opening index.html over file:// won't work."

If I manually refer the project resources in index.html, the page display it's contents but vue-router doesn't work.

I would appreciate if someone can suggest solutions to get rid off this problem.