Mint Mint - 1 year ago 120
Javascript Question

app.message returns undefined in console using Vue in Laravel

I've just started learning Vue, and have been following there intro guide, but am stuck at the:

Just open up your browser’s JavaScript console and set app.message to
a different value.

I tried
app.message = 'test'
in Chrome's console, and it returns
, but the text doesn't change in the browser.

Also when I just run
before setting it to "test", it returns



const app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'


window._ = require('lodash');

window.$ = window.jQuery = require('jquery');

window.Vue = require('vue');

Vue.http.interceptors.push((request, next) => {
request.headers.set('X-CSRF-TOKEN', Laravel.csrfToken);




<div id="app">
@{{ message }}

I'm guessing its something to do with what Laravel does since when I start a standalone html file it works as Vue says. I'm also new to Laravel so not to sure what's going on here.

Using Vue 2 and Laravel 5.3

Put a copy of the issue onto a new DigitalOcean droplet for easier debugging.

Answer Source

Well, as far as I can see from the live link is that its not the problem you anticipated at all. app returns an HTML element collection and not a Vue object. Try logging $vm(the Vue object) in your console and you will see the difference. Maybe, try renaming the object from const app to vue(lowercase) as I think you(or the package manager or something) have used app somewhere else.

The reason why app.message returns "test" on console is that every console statement returns something. It returns undefined first because app(The HTML collection) doesn't have a property named message.

Your live link console

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download