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">×</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没有经验