app.message returns 在 Laravel 中使用 Vue 在控制台中未定义

Question

我刚开始学习 Vue，并一直在关注那里 intro guide，但卡在了：

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

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

另外，当我只是运行 app.message 在将其设置为 "test" 之前，它 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

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

使用 Vue 2 和 Laravel 5.3

Answer 1

嗯，据我在直播中看到的 link 根本不是您预期的问题。 app returns 一个 HTML 元素集合而不是 Vue 对象。尝试在您的控制台中记录 $vm（Vue 对象），您会看到不同之处。也许，尝试将对象从 const app 重命名为 vue（小写），因为我认为你（或包管理器或其他东西）在其他地方使用过 app。

控制台上app.message returns "test"的原因是每个控制台声明returns东西。它 returns 首先未定义，因为应用程序（HTML 集合）没有属性命名消息。

app.message returns 在 Laravel 中使用 Vue 在控制台中未定义

app.message returns undefined in console using Vue in Laravel

javascript

php

laravel

vue.js

laravel-5.3