Mint Mint - 18 days ago 8
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
"test"
, but the text doesn't change in the browser.

Also when I just run
app.message
before setting it to "test", it returns
undefined
.

app.js

require('./bootstrap');

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


./bootstrap

window._ = require('lodash');

window.$ = window.jQuery = require('jquery');
require('bootstrap-sass');

window.Vue = require('vue');
require('vue-resource');

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

next();
});


test.blade.php

@extends('layouts.app')

@section('content')
<div id="app">
@{{ message }}
</div>
@endsection


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

Edit:
Put a copy of the issue onto a new DigitalOcean droplet for easier debugging.
http://45.55.70.86:2015/test

Answer

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