Laravel 和 Vue 警告问题答案

【问题标题】：Laravel & Vue warning issueLaravel 和 Vue 警告问题
【发布时间】：2019-10-14 15:08:33
【问题描述】：

我从事过 Laravel 和 Vue js 项目。

这是 Laravel 代码

代码运行良好，但在开发者模式下出现警告（检查）

Laravel 视图代码

@extends('layouts/app')

@section('content')

    <div id="app">
     </div>

@endsection

app.js 代码

const router = new VueRouter({ mode: 'history', routes: routes});
const app = new Vue(Vue.util.extend({ router }, App)).$mount('#app');


app.js:74791 [Vue warn]: Cannot find element: #app
warn @ app.js:74791
query @ app.js:79817
./node_modules/vue/dist/vue.common.dev.js.Vue.$mount @ app.js:86018
./resources/js/app.js @ app.js:86329
__webpack_require__ @ app.js:20
0 @ app.js:86576
__webpack_require__ @ app.js:20
(anonymous) @ app.js:84
(anonymous) @ app.js:87
app.js:74791 [Vue warn]: Property or method "single" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

found in

---> <Overlap> at resources/js/components/OutwardComponent.vue
       <Root>

【问题讨论】：

您确定您的路线指向该视图吗？

标签： css laravel vue.js

【解决方案1】：

你需要引用 Vue 的 div 应该在 Layout 文件中，您的 div 可能在 Vue 初始化之后呈现。将<div id="app"></div> 放入layouts/app 文件中，看看它是否消失了。

【讨论】：