Как исправить эти ошибки, которые я получаю в консоли?

ProgramBox

Как исправить эти ошибки, которые я получаю в консоли?

Post author:admin
Запись опубликована:1 марта, 2023
Post category:Вопросы по программированию

#vue.js #vuejs2

Вопрос:

Я получаю эти 2 ошибки в моей консоли, и мое приложение не работает

 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">amp;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

Я пытался исправить эти ошибки, но безуспешно… Я не знаю, что я делаю не так, я не знаком с vue в сочетании с laravel… Код Laravel работает нормально, но когда я включаю vue, я получаю вышеуказанные 2 ошибки

Ответ №1:

В вашем блейд-компоненте должен быть элемент с идентификатором приложения. <div id="app"></div> и поместите свой компонент vue внутри этого элемента.

Ответ №2:

v-модель может использоваться только для ввода формы, текстовой области и выбора элементов в соответствии с https://v2.vuejs.org/v2/guide/forms.html

1. хорошо, понял… но как мне исправить другую ошибку: app.js:38306 [Vue warn]: Cannot find element: #app

2. Я не знаю об этом. У меня нет опыта работы с PhP

3. В app.js , есть строка кода, которая называет элемент, используемый для отображения компонентов vue, и по умолчанию используется app . Поэтому необходимо добавить id =»app» к любому html-элементу, в который вы вставляете свой материал vue. Смотрите мой ответ ниже. Я новичок в Vue, но это то, что мне нужно было сделать, чтобы это сделать.