Блог

Мне нужна помощь в отладке проблемы, которая сводит меня с ума.

У меня есть проект 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. Любые намеки на это были бы очень признательны!

предложение @ShayaUlman решило проблему, изменив компонент на макет https://inertiajs.com/pages .

Для дальнейшего использования, если ваш макет не отображается, попробуйте удалить или закомментировать содержимое, повторно запустите npm и повторно добавьте содержимое. Похоже, впоследствии это решит проблему.