app.message在Laravel中使用Vue在控制台中返回undefined

Question

我刚刚开始学习Vue，并一直关注intro guide，但我仍然坚持：

  

只需打开浏览器的JavaScript控制台并将app.message设置为   不同的价值。

我在Chrome的控制台中尝试app.message = 'test'，它返回"test"，但文本在浏览器中没有变化。

此外，当我在设置为“test”之前运行app.message时，它会返回undefined。

app.js

require('./bootstrap');

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

./自举

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

我猜测它与Laravel的功能有关，因为当我启动一个独立的html文件时，它可以像Vue所说的那样工作。我也是Laravel的新手，所以不确定这里发生了什么。

使用Vue 2和Laravel 5.3

Answer 1

嗯，据我所知，从实时链接可以看出，这根本不是你预期的问题。 app返回HTML元素集合而不是Vue对象。 尝试在控制台中记录$ vm（Vue对象），您将看到差异。 也许，尝试将对象从const app重命名为vue（小写），因为我认为你（或包经理或其他东西）已经在其他地方使用过app。

app.message在控制台上返回“test”的原因是每个控制台语句都返回一些内容。它首先返回undefined，因为app（HTML集合）没有名为message的属性。