我如何在 laravel Blade 中使用 vuejs 组件？

Posted 2023-02-23

【中文标题】我如何在 laravel Blade 中使用 vuejs 组件？

【英文标题】：how i can use vuejs component in laravel blade?

【发布时间】：2020-07-18 08:31:25

【问题描述】：

这个想法是在文件刀片中使用 vue 组件，但我得到了这个错误

Failed to mount component: template or render function not defined.

这是我在 app.js 中的导入

Vue.component('Notification' ,require('./components/Notification.vue'));

这是我的组件代码

<template>
     <li class="nav-item dropdown">
        <a class="nav-link" data-toggle="dropdown" href="#">
          <i class="fas fa-bell"></i> <span class="badge badge-light">unreads.length</span>
          <span class="badge badge-warning navbar-badge"></span>
        </a>
        <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
  <notification-item> </notification-item>


        </div>
      </li>

</template>

<script>
    export default 
      props :['unreads','userid'],
        mounted() 
           Echo.private('App.User.'+ this.userid)
    .notification((notification) => 
        console.log(notification);
    );
        
    
</script>

最后这是我在 home.blade.php 中的代码

<Notification  :userid="auth()->id()" :unreads="auth()->user()->unreadNotifications"> </Notification>

有人帮帮我

【问题讨论】：

你必须通过 webpack 等将 vuejs 代码编译成 javascript。

谢谢。我忘记在 app.js 中设置默认值 ``` Vue.component('Notification' ,require('./components/Notification.vue')); ```

【参考方案1】：

通过npm run dev 编译vuejs 文件，并确保为userid 使用正确的绑定并将app.js 包含到脚本中。