Software

I'm making a list of tools.

I'm trying to pass the full tool data object from the parent component (the tool list) to each child component (the tool items), using single file templates.

In the child component, I get this error:

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

Where ... is any property of the tool data object, for example title or description.

Here's my setup:

Tools.vue (parent):

<template> <main id="tools"> <tool v-for="tool in tools" :data="tool" :key="tool.id"></tool> </main> </template> <script> import Tool from './Tool.vue' let test = { id: 1, title: 'Title', description: 'Description' }; export default { data() { return { tools: [ test ] } }, components: {'tool': Tool} } </script>

Tool.vue (child):

<template> <div class="tool"> <div class="title">{{ title }}</div> <div class="description">{{ description }}</div> </div> </template> <script> export default {} </script>

It should be simple, but I'm unable to find the solution with my google-fu. What am I missing here?

I'm creating a test Component in Vue.js. I want to pass a parameter to use in my template as follows:

Vue.component('test', { props: ['href'], template: '<li><a href="{{href}}"><slot></slot></a></li>' });

In my html file:

<test href="/">Tvest</test>

But the property href is not binding to the attribute.

<li><a href="{{href}}">Tvest</a></li>

How can I do it properly in Vue.js?

There is this jQuery method:

$("#showNames").text("{{ $t('hide_labels') }}");

I'd like to set text taken from vue-i18n instance, dependent on user localization. When it's written this way, I get the literal moustache syntax contents. Is there any way to get the values displayed?

I'm brand new to Vue.js and I'm trying to get a simple site set up with it. I have a component for each page (About us, Contact us, etc).

This is my working starting point

Vue.component('about-us', { template: '<div>...lots of markup...</div>' });

I want to transform that code into something that works asynchronously. Attempting to follow the docs, here is my code:

Vue.component('about-us', function(resolve, reject){ let template_string = ''; // Load the template with ajax $.post(ajax_url, {'action': 'get_about_page'}, function(r){ r = JSON.parse(r); // Save the template string if( r.success ) { template_string = r.data; } }); // Resolve callback for Vue resolve({ template: template_string }); });

The error I get is:

[Vue warn]: Failed to mount component: template or render function not defined. found in ---> Anonymous Root

Question: is my approach wrong? Is it a syntax problem? I'm not sure if I'm on the right path. (yes I have jQuery loaded)

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.