Vue.js 如何修复这些错误I';我进控制台了?

Vue.js 如何修复这些错误I';我进控制台了?,vue.js,vuejs2,Vue.js,Vuejs2,我在控制台中遇到这两个错误,我的应用程序无法工作 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: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>)
app.js:38306[Vue warn]:找不到元素:#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
(匿名)@app.js:84
(匿名)@app.js:87
DevTools未能加载SourceMap:无法加载的内容http://127.0.0.1:8000/js/popper.js.map: HTTP错误:状态代码404,网络::错误\u HTTP\u响应\u代码\u失败
app.js:38306[Vue warn]:编译模板时出错:
:v-model在此元素类型上不受支持。如果您使用的是contenteditable,建议将专用于此目的的库包装在自定义组件中。
286|          
287|          
288|              
|                                     ^^^^^^^^^^^^^^^^^^^^^^^^
289|                  
290|                      
(位于)
我的管理文件

<!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>

{{config('app.name','Laravel')}
.
.
.
.
.
.
.
@产量(‘主要成分’)
.
.
.
.
.
.
@收益率('js_索引_页面')
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">&times;</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
@extends('layouts.admin'))
@节(“主要内容”)
创建新权限

@if(会话('message')) {{session('message')} &时代; @恩迪夫 简单许可 预先许可 许可详情:
@csrf 名称 @错误('名称') {{$message}} @恩德罗 鼻涕虫 @错误('slug') {{$message}} @恩德罗 描述 @错误('说明') {{$message}} @恩德罗 权限: . . . . @端部 @节(“js_索引_页面”) var app=新的Vue({ el:“#应用程序”, 数据:{ permissionType:“基本”, 资源:“”, crudSelected:[“创建”、“读取”、“更新”、“删除”] }, 方法:{} }); @端部

我一直试图纠正这些错误,但没有成功。。。我不知道我做错了什么,我不是法米利亚尔和拉威尔的组合。。。Laravel代码工作正常,但当我包含vue时,我会出现上述两个错误

v-model只能用于表单输入、文本区域和根据选择元素

不能将div元素与v-model绑定。你想实现什么?好的,明白了。。。但是我如何修复另一个错误:
app.js:38306[Vue warn]:找不到元素:#app
我不知道这个错误。我对PhP没有经验