Vue.js+Laravel数据展示异常：拆分文件后无法生成3个数据卡片

Hey there! Let's figure out why your data card display breaks when splitting your Vue code into separate files—this is a super common hurdle when moving from a single script file to a modular setup. Based on your Blade template and description, here are the most likely fixes:

1. Ensure Your stats-card Component Is Properly Imported & Registered #

When you split components into separate files, Vue doesn't automatically know about them. You need to explicitly import and register the component in your main overview.js file:

// overview.js
import StatsCard from './path/to/StatsCard.vue'; // Update this path to match your file structure

new Vue({
  el: '#app',
  components: {
    StatsCard // Register the component (Vue 2 syntax; for Vue 3 use app.component('stats-card', StatsCard))
  },
  data() {
    return {
      // Make sure your statsCards data is defined here
      statsCards: [
        { type: 'primary', icon: 'fa-user', title: 'Total Users', value: 1453 },
        { type: 'success', icon: 'fa-shopping-cart', title: 'Orders Today', value: 78 },
        { type: 'danger', icon: 'fa-exclamation-circle', title: 'Pending Issues', value: 5 }
      ]
    };
  }
});

Double-check that the component name in your Blade template (<stats-card>) matches the registered name—Vue automatically converts PascalCase (StatsCard) to kebab-case (stats-card), so that should work if you've registered it correctly.

2. Remove the Extra <template> Tag in Your Blade File #

Blade renders HTML directly, so wrapping your Vue app in a <template> tag can cause DOM parsing issues. Update your Blade code to remove that wrapper:

@extends('index')
@section('container')
  <div class="row" id="app">
    <div class="col-lg-3 col-sm-6" v-for="stats in statsCards" :key="stats.title">
      <stats-card>
        <div class="icon-big text-center" :class="`icon-${stats.type}`" slot="header">
          <i :class="stats.icon"></i>
          <!-- Rest of your header content -->
        </div>
        <!-- Rest of your stats-card content -->
      </stats-card>
    </div>
  </div>
@endsection

Also, don't forget to add a :key attribute to your v-for loop—it's required for Vue to track list items efficiently.

3. Verify Your stats-card Component Has Proper Slot Definitions #

Your Blade template uses a named slot (slot="header"), so make sure your StatsCard.vue component actually defines that slot:

<!-- StatsCard.vue -->
<template>
  <div class="card">
    <!-- Named slot for the header content -->
    <slot name="header"></slot>
    <div class="card-body">
      <!-- Add other default content or additional slots here -->
    </div>
  </div>
</template>

<script>
export default {
  // Component logic if needed
}
</script>

Without this slot definition, the content you're passing into <stats-card> won't render.

4. Confirm Data Is Being Passed Correctly #

If you moved your statsCards data into a separate file, ensure you're importing it properly into overview.js:

// data.js
export const statsCards = [
  // Your 3 card objects here
];

// overview.js
import { statsCards } from './data.js';

new Vue({
  el: '#app',
  data() {
    return {
      statsCards: statsCards // Or just statsCards if using ES6 shorthand
    };
  },
  // ...component registration
});

Start with these checks—9 times out of 10, the issue is either missing component registration, incorrect template structure, or slot misconfiguration.

内容的提问来源于stack exchange，提问作者Sofiane