我在控制台中遇到这两个错误，我的应用程序无法正常工作
app.js:38306 [Vue warn]: Cannot find element: #app
warn @ app.js:38306
query @ app.js:43338
./node_modules/vue/dist/vue.common.dev.js.Vue.$mount @ app.js:49554
Vue._init @ app.js:42684
Vue @ app.js:42750
./resources/js/app.js @ app.js:49751
__webpack_require__ @ app.js:20
0 @ app.js:49900
__webpack_require__ @ app.js:20
(anonymous) @ app.js:84
(anonymous) @ app.js:87
DevTools failed to load SourceMap: Could not load content for http://127.0.0.1:8000/js/popper.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
app.js:38306 [Vue warn]: Error compiling template:
<div v-model="permissionType">: v-model is not supported on this element type. If you are working with contenteditable, it's recommended to wrap a library dedicated for that purpose inside a custom component.
286| <div class="col-md-12">
287| <div class="row my-3">
288| <div class="col-md-10" v-model="permissionType">
| ^^^^^^^^^^^^^^^^^^^^^^^^
289| <div class="custom-control custom-radio custom-control-inline">
290| <input type="radio" id="basic" name="permission_type" class="custom-control-input" value="basic">
(found in <Root>)
我的管理文件
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Laravel SB Admin 2">
<meta name="author" content="Alejandro RH">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<script src="{{ asset('js/app.js') }}"></script>
<!-- Fonts -->
<link href="{{ asset('vendor/fontawesome-free/css/all.min.css') }}" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
<!-- Styles -->
<link href="{{ asset('css/sb-admin-2.min.css') }}" rel="stylesheet">
<link href="{{ asset('css/backApp.css') }}" rel="stylesheet">
<!-- Favicon -->
<link href="{{ asset('img/favicon.png') }}" rel="icon" type="image/png">
</head>
<body id="page-top">
<div id="app">
.
.
.
.
.
.
.
<div class="container-fluid">
@yield('main-content')
</div>
.
.
.
.
.
.
<script src="{{ asset('js/sb-admin-2.min.js') }}"></script>
@yield('js_index_page')
</body>
</html>
create.blade.php
@extends('layouts.admin')
@section('main-content')
<!-- Page Heading -->
<h1 class="h3 mb-4 text-gray-800">Create New Permission</h1>
<hr/>
@if (session('message'))
<div class="alert alert-success border-left-success alert-dismissible fade show" role="alert">
{{ session('message') }}
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
@endif
<div class="row justify-content-center">
<div class="col-md-12">
<div class="row my-3">
<div class="col-md-10" v-model="permissionType">
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" id="basic" name="permission_type" class="custom-control-input"
value="basic" />
<label class="custom-control-label font-weight-bold" for="basic">Simple Permission</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" id="crud" name="permission_type" class="custom-control-input"
value="crud" />
<label class="custom-control-label font-weight-bold" for="crud">Advance Permission</label>
</div>
</div>
</div>
<div class="card shadow mb-4">
<div class="card-body">
<h4 class="font-weight-bold">Permission Details:</h4>
<hr>
<form method="POST" action="{{ route('roles.store')}}">
@csrf
<div class="row">
<div class="col-md-12">
<div class="form-group" v-if="permissionType =='basic'">
<label for="name" class="font-weight-bold">Name</label>
<input type="text" name="name" class="form-control @error('name') is-invalid @enderror" id="name" value="{{ old('name') }}" required>
@error('name')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
<div class="form-group" v-if="permissionType =='basic'">
<label for="name" class="font-weight-bold">Slug</label>
<input type="text" name="slug" class="form-control @error('slug') is-invalid @enderror" id="slug" value="{{ old('slug') }}" required disabled>
@error('slug')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
<div class="form-group" v-if="permissionType =='basic'">
<label for="description" class="font-weight-bold">Description</label>
<input type="text" name="description" class="form-control @error('description') is-invalid @enderror" id="description" value="{{ old('description') }}" required>
@error('description')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
</div>
</div>
</div>
</div>
<div class="card shadow mb-4" v-if="permissionType =='crud'">
<div class="card-body">
<h4 class="font-weight-bold">Permissions:</h4>
<div class="row">
<div class="col-md-12">
.
.
.
.
</form>
</div>
</div>
@endsection
@section('js_index_page')
<script>
var app = new Vue({
el: '#app',
data: {
permissionType: 'basic',
resource: '',
crudSelected: ['create', 'read', 'update', 'delete']
},
methods: {}
});
</script>
@endsection
我一直在尝试解决这些错误，但未成功...我不知道我在做什么错，我不喜欢将vue与laravel结合使用... Laravel代码可以正常工作，但是当我包含vue时我收到上述2个错误