caught ReferenceError: route is not defined
При создании запроса в базу данных выводит ошибку route is not defined на book-screen__download.vue:48:10. Проект на гитхабе https://github.com/chikbob/botan-cultire-master
Код book-screen__download.vue:
<template>
<section :class="cnBookScreen('download')">
<div :class="cnBookScreen('download-block')">
<div :class="cnBookScreen('download-text')">
{{ model.book.name }}
</div>
<button @click="isOpen = true" :class="cnBookScreen('download-btn')">
Завантажити
</button>
<form @submit.prevent="store">
<BookScreenDialogRegistration :open="isOpen" @close="isOpen = !isOpen">
<div @click="isOpen = false" :class="cnBookScreen('dialogRegistration-dialog_exit')">X</div>
<div :class="cnBookScreen('dialogRegistration-dialog_content')">Заповніть дані, щоб отримати електронну
копію
</div>
<div :class="cnBookScreen('dialogRegistration-input_text')">Ім’я</div>
<input v-model="form.name" :class="cnBookScreen('dialogRegistration-input')" required />
<div :class="cnBookScreen('dialogRegistration-input_text')">Номер телефону</div>
<input v-model="form.telephone" :class="cnBookScreen('dialogRegistration-input')" required />
<div :class="cnBookScreen('dialogRegistration-input_text')">Електронна пошта</div>
<input v-model="form.email" :class="cnBookScreen('dialogRegistration-input')" required />
<button @click="isClosed()" :class="cnBookScreen('dialogRegistration-btn')">Завантажити</button>
</BookScreenDialogRegistration>
</form>
</div>
</section>
</template>
<script setup>
import { ref } from 'vue'
import { cnBookScreen } from "./book-screen.const.js";
import { bookModel } from "./book-screen.model.js";
import BookScreenDialogRegistration from './book-screen__dialogRegistration.vue'
import { useForm } from '@inertiajs/vue3';
const model = bookModel();
const isOpen = ref(false)
const form = useForm({
name: null,
telephone: null,
email: null
});
function store() {
form.post(route('Visitor/index'))
}
function isClosed() {
isOpen = false
}
</script>
<style lang="scss" scoped>
.book-screen__dialogRegistration {
&-dialog {
&_exit {
display: flex;
justify-content: flex-end;
font-family: 'Book Antiqua';
font-style: normal;
font-weight: 400;
font-size: 15px;
margin: 0.5rem auto 20px 96%;
width: fit-content;
text-decoration: none;
cursor: pointer;
color: #8FBC76;
padding: 0.3rem;
border-radius: 2rem;
&::selection {
background: transparent;
}
&::-moz-selection {
background: transparent;
}
}
&_content {
display: flex;
justify-content: center;
font-family: 'Book Antiqua';
font-style: normal;
font-weight: 400;
font-size: 25px;
text-align: center;
width: 60%;
margin: 10px auto 20px;
color: #222E21;
}
}
&-btn {
width: 200px;
height: 50px;
font-family: 'Book Antiqua';
font-style: normal;
font-weight: 400;
font-size: 20px;
line-height: 48px;
text-align: center;
border-radius: 4px;
border: none;
text-decoration: none;
text-transform: capitalize;
padding: 0 25px;
border-radius: 50px;
margin: 30px auto 60px;
height: fit-content;
background-color: #8FBC76;
color: #fff;
cursor: pointer;
}
&-input {
width: 300px;
height: 30px;
margin: auto;
&_text {
font-family: 'Book Antiqua';
font-style: normal;
font-weight: 400;
font-size: 20px;
text-align: flex-start;
margin: 10px auto;
width: 300px;
color: #222E21;
}
}
}
.book-screen__download {
display: flex;
justify-content: center;
align-items: center;
margin-top: 2rem;
margin-bottom: 60px;
&-block {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 540px;
height: 260px;
border: 7px #8eba75 solid;
}
&-text {
font-family: 'Book Antiqua';
font-style: normal;
font-weight: 400;
font-size: 30px;
text-align: center;
width: 80%;
margin: 0 auto 35px;
color: #222E21;
}
&-btn {
width: 200px;
height: 50px;
font-family: 'Book Antiqua';
font-style: normal;
font-weight: 400;
font-size: 20px;
line-height: 48px;
text-align: center;
border-radius: 4px;
border: none;
text-decoration: none;
text-transform: capitalize;
padding: 10px 25px;
border-radius: 50px;
height: fit-content;
background-color: #8FBC76;
color: #fff;
}
}
</style>
Код импортированного book-screen__dialogRegistration.vue
<template>
<div :class="cnBookScreen('dialogRegistration')" v-show="open">
<div :class="cnBookScreen('dialogRegistration-content')">
<slot></slot>
</div>
</div>
</template>
<script setup>
import { cnBookScreen } from "./book-screen.const.js";
import { bookModel } from "./book-screen.model.js";
const model = bookModel();
const props = defineProps({
open: Boolean,
required: Boolean,
})
console.log(props.open)
function hideDialog(open) {
open = false
console.log(open)
return open
}
</script>
<style lang="scss" scoped>
.book-screen__dialogRegistration {
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
position: fixed;
display: flex;
z-index: 100;
&-content {
margin: auto;
background: #EDF6E2;
border-radius: 15px;
min-width: 700px;
min-height: 400px;
z-index: 100;
display: flex;
flex-direction: column;
}
}
</style>
Миграция в бд выглядит так:
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
return new class extends Migration
{
public function up()
{
Schema::create('visitors', function (Blueprint $table) {
$table->id();
$table->string('name');
$table->string('telephone');
$table->string('email');
$table->timestamps();
});
}
};
И код VisitorController.php
<?php
namespace App\Http\Controllers\Pages;
use Inertia\Inertia;
use Inertia\Response;
use App\Models\Visitor;
use Illuminate\Http\Request;
class VisitorController
{
public function __invoke(Visitor $visitor): Response
{
return Inertia::render('Visitor/index', [
'visitors' => Visitor::all(),
]);
}
public function store(Request $request)
{
Visitor::create($request->validate([
'name' => ['required', 'max:50'],
'telephone' => ['required', 'max:50'],
'email' => ['required', 'max:50', 'email'],
]));
return to_route('visitor.index');
}
}
И вот все роуты на страницах
<?php
use App\Http\Controllers\Pages\BookPageController;
use App\Http\Controllers\Pages\VisitorController;
use Illuminate\Support\Facades\Route;
use Inertia\Inertia;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider and all of them will
| be assigned to the "web" middleware group. Make something great!
|
*/
Route::get('/', function () {
return Inertia::render('index');
});
Route::get('/books/{book}', BookPageController::class);
Route::get('/Visitor/index', VisitorController::class);
Route::get('/care', fn()=>Inertia::render('care'));
Route::get('/appearance', fn()=>Inertia::render('appearance'));
Route::get('/info', fn()=>Inertia::render('info'));
Route::get('/inventory', fn()=>Inertia::render('inventory'));
Route::get('/varities', fn()=>Inertia::render('varities'));
Источник: Stack Overflow на русском