laravel - Vue共享组件未显示

问题描述

我需要一些帮助来调试一个让我发疯的问题。

我有一个以 Vue3 作为前端的 laravel 项目，使用 InertiaJS 连接到后端。

文件夹结构如下

|_resources
|__js
|___Pages
|____AddContent
|_____Index.vue
|____Home
|_____Index.vue
|___Shared
|____Footer.vue

在 Home/Index.vue 调用时，我的 Footer.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>

主页.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 页面。对此的任何提示将不胜感激！

标签： laravelvue.jsfrontend

laravel - Vue共享组件未显示

问题描述

解决方案

推荐阅读