#laravel #vue.js #frontend
Вопрос:
Мне нужна помощь в отладке проблемы, которая сводит меня с ума.
У меня есть проект laravel с Vue3 в качестве интерфейса, использующий InertiaJS для подключения к серверной части.
Структура папок выглядит следующим образом
|_resources
|__js
|___Pages
|____AddContent
|_____Index.vue
|____Home
|_____Index.vue
|___Shared
|____Footer.vue
Мой Footer.vue (ниже) работает нормально при вызове дома /Index.vue
<div class="m-6 text-ternary-dark dark:text-ternary-light text-lg">
<div class="flex justify-between">
<Link href="/">
<i data-feather="home" class="ml-0 sm:ml-1 mr-2 sm:mr-3 w-5 sm:w-6"></i>
</Link>
<Link href="/market"><i data-feather="package" class="ml-0 sm:ml-1 mr-2 sm:mr-3 w-5 sm:w-6"></i></Link>
<Link href="/add"><i data-feather="plus-square" class="ml-0 sm:ml-1 mr-2 sm:mr-3 w-5 sm:w-6"></i></Link>
<Link href="/message"><i data-feather="send" class="ml-0 sm:ml-1 mr-2 sm:mr-3 w-5 sm:w-6"></i></Link>
<Link href="/profile"><i data-feather="user" class="ml-0 sm:ml-1 mr-2 sm:mr-3 w-5 sm:w-6"></i></Link>
</div>
</div>
</template>
<script>
import { Link } from "@inertiajs/inertia-vue3";
import feather from 'feather-icons';
export default {
components: {
Link,
},
};
</script>
Home.vue
<template>
<Header />
<div class="mb-4 text-ternary-dark dark:text-ternary-light text-lg">
<!-- The top section of homepage, reserved for hastags, news, and other features -->
<div>
<p>Top Component</p>
</div>
<!-- The rest of the homepage contents -->
<div>
<p>The Rest</p>
<div class="wrapper" v-if="blogs.length">
<div class="blog" v-for="blog in blogs" :key="blog">
<Link href="blogs/{id}/show" method="get" :data="{id: blog.id}">
<!-- <img v-bind:src="blog.image"/> -->
<small>posted by: {{ blog.id }}</small>
{{ blog.title }}
</Link>
</div>
</div>
</div>
</div>
<Footer />
</template>
<script>
import { Link } from '@inertiajs/inertia-vue3'
import Header from "../../Shared/Header.vue";
import Footer from "../../Shared/Footer.vue";
export default {
components: {
Header,
Footer,
Link
},
props: {
blogs: Object,
},
};
</script>
Вот как выглядит Home/Index.vue:
Тогда проблема в том, что в AddContent/Index.vue (ниже) у меня есть тот же код, что и в Home/ Index.vue для импорта нижнего колонтитула.
<template>
<div class="mb-4 text-ternary-dark dark:text-ternary-light text-lg">
<form @submit.prevent="submit">
<label for="title">Title: </label>
<input type="text" id="title" v-model="form.title" placeholder="type something" class="rounded-full py-1 px-4"/>
<label for="body">Body: </label>
<input type="text" id="body" v-model="form.body" placeholder="type something" class="rounded-full py-1 px-4"/>
<button type="submit">Submit</button>
</form>
</div>
<Footer />
</template>
<script>
import { reactive } from "vue";
import { Inertia } from "@inertiajs/inertia";
import Footer from "../../Shared/Footer.vue";
export default {
components: {
Footer,
},
setup() {
const form = reactive({
title: null,
body: null,
});
function submit() {
Inertia.post("/", form);
}
return { form, submit };
},
};
</script>
<style scoped>
* {
outline: 1px solid red;
}
</style>
Однако в моем AddContent/index.vue панель нижнего колонтитула просто не отображается.
Я понятия не имею, что, черт возьми, происходит … так как красный контур прекрасно закрывал нижний колонтитул, но ничего из нижнего колонтитула не передавалось на страницу AddContent. Любые намеки на это были бы очень признательны!
Комментарии:
1. нет ли ошибок в консоли?
2. Очень сложно понять, что не так, но я укажу в качестве примечания, что вы должны использовать макеты (вам не нужно вызывать
<Footer/>
дважды)3. @Aless55 вообще ничего, вот почему это так расстраивает… Такое ощущение, что это что-то очень простое, например, опечатка или что-то в этом роде, но я трижды проверил и переписал весь код, скопировав и вставив тот же импорт, по-прежнему безуспешно.
4. @ShayaUlman Спасибо, это был хороший выбор макетов. Сначала он не работал, но после того, как я удалил <form>, перезапустил, увидев макет, затем снова вставил <form> , тогда все работало нормально. (К вашему сведению — он не работал, когда <form> все еще был там после того, как я добавил макеты, пришлось удалить перезапустить, чтобы увидеть изменения) — но я все еще удивляюсь, почему компонент не работал в первую очередь… ну что ж.
Ответ №1:
предложение @ShayaUlman решило проблему, изменив компонент на макет https://inertiajs.com/pages .
Для дальнейшего использования, если ваш макет не отображается, попробуйте удалить или закомментировать содержимое, повторно запустите npm и повторно добавьте содержимое. Похоже, впоследствии это решит проблему.