小编Ash*_*ett的帖子

如何将Vue组件"导入"到Vue组件中

这可能是一个非常愚蠢的问题,但是,我无法找到答案.

所以,我正在构建一个Vue组件,并希望在我的组件内部访问vue-spinner的组件.我该怎么办?

以下是相关代码的片段:

app.js:

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

import GridLoader from 'vue-spinner/src/GridLoader.vue';

const app = new Vue({
    el: '#app',
    components: {
        GridLoader
    }
});
Run Code Online (Sandbox Code Playgroud)

TeamPlayersComponent.vue:

<grid-loader></grid-loader>
Run Code Online (Sandbox Code Playgroud)

假设已经安装了vue-spinner(NPM),TeamPlayersComponent.vue并且除了在控制台中提供此错误之外,它是有效且有效的:

vue.js?3de6:525 [Vue warn]: Unknown custom element: <grid-loader> - did you register the component correctly? For recursive components, make sure to provide the "name" option. (found in component <players> at /home/vagrant/code/rounds-smaa/resources/assets/js/components/TeamPlayersComponent.vue)

我正在和Laravel Elixir和Gulp一起使用Vue.

vue.js vue-component

15
推荐指数
2
解决办法
1万
查看次数

路由和查看命名约定

我正在寻找关于我用于路由名称和视图目录结构的命名约定的一些输入.

说我有以下路线:

Route::get('/teams/choose', 'ChooseTeamController@index')->name('teams.choose.index');

Route::post('/teams/choose', 'ChooseTeamController@choose')->name('teams.choose');

Route::get('/teams/{team}/manage', 'ManageTeamController@index')->name('teams.team.manage.index');
Run Code Online (Sandbox Code Playgroud)

对于get路由,我会将视图放在与路由名称匹配的目录结构中.例如resources/views/teams/team/manage/index.blade.php.但是,我觉得这太冗长了.

我觉得如果我要使用像这样的视图目录结构,而不是最后一个例子,那将是全面(对我自己和其他开发人员)的混淆:resources/views/team/manage/index.blade.php- team没有使用复数,所以当我有其他视图时,如所以(使用原始的例子约定):resources/views/teams/choose.index他们在视觉上没有预期的关系.即他们有A型不同的"根"目录- teamsVS team.

任何意见或建议将不胜感激.

naming-conventions laravel

11
推荐指数
1
解决办法
1万
查看次数

Laravel中模型的多个策略

Laravel是否允许我们为模型添加多个策略?即考虑App\Providers\ASuthServiceProvider$policies财产:

protected $policies = [
    'App\Team' => 'App\Policies\TeamPolicy',
    'App\Team' => 'App\Policies\RoundPolicy',
    'App\Team' => 'App\Policies\AnotherPolicy',
];
Run Code Online (Sandbox Code Playgroud)

我还没有在一个应用程序中对它进行测试,因为即使它有效,我也会在这里提出一个类似的问题,关于这是否被视为不良行为或是否容易出现意外行为.

我的替代方案是一个非常混乱的策略,包含与几个控制器相关的策略,以camel case命名:

/**
 * Allows coach of Team and admin to see the Team management view.
 * Used in TeamManagementController
 *
 * @param  App\User   $user
 * @param  App\Team   $team
 * @return boolean
 */
public function manage(User $user, Team $team)
{
    return  $user->id === $team->user_id || $user->isAdmin();
}

/**
 * Allows a coach to detach themself from a Team.
 * Used …
Run Code Online (Sandbox Code Playgroud)

php policies laravel

10
推荐指数
2
解决办法
2660
查看次数

Laravel事件不是广播

我正在为应用程序开发聊天/消息功能.当用户发送消息时,我希望触发并广播特定事件.我当时希望Laravel Echo使用pusher驱动程序通过Laravel Echo收听活动的广播频道.

我希望Laravel Echo实现在Vue组件中并检索通过事件广播的数据.目前,我无法将活动广播到私人频道或仅播放频道.

这是我做的:

1)添加配置到.env.

2)添加配置为bootstrap.js:

window.Echo = new Echo({
  broadcaster: 'pusher',
  key: 'mykey',
  encypted: false
});
Run Code Online (Sandbox Code Playgroud)

3)添加了auth签入App\Providers\BroadcastServiceProvider(如果用户现在已登录,则返回true):

Broadcast::channel('chat', function ($user) {
  // verify that user is recipient of message
  return \Auth::check();
});
Run Code Online (Sandbox Code Playgroud)

4)添加App\Providers\BroadcastServiceProvider::class,App/config/app.php.

5)创建了App\Events\UserSentMessage一个PrivateChannel以命名方式广播的事件chat.我也尝试过广播Channel.我检查过事件是event()在控制器中调用助手时触发的,它似乎没有被广播.我也试过broadcast在提到的控制器中使用该方法.

6)在mountedVue生命周期钩子中的有效Vue组件中添加了以下内容(组件按预期呈现数据等,只是不与Laravel Echo atm一起使用):

    Echo.private('chat').listen('UserSentMessage', (data) => {
                console.log(data);
            }, (e) => {
                console.log(e);
            });
Run Code Online (Sandbox Code Playgroud)

也尝试过:

     Echo.channel('chat').listen('UserSentMessage', (data) …
Run Code Online (Sandbox Code Playgroud)

events laravel vue.js laravel-echo

7
推荐指数
3
解决办法
5422
查看次数

使用 eventHub 在 Vue 中发出事件的问题

我有一个组件需要在其生命周期的某个时刻发出一个事件。此事件将由同级组件侦听。

我正在使用事件中心进行此通信。

但是,我Uncaught TypeError在尝试调用eventHub.$emit('EventName').

这是控制台中收到的完整错误。

vue.js?3de6:2400 Uncaught TypeError: cbs[i].apply is not a function
at Vue$3.Vue.$emit (eval at <anonymous> (http://rounds.smaa.app:8000/js/app.js:322:1), <anonymous>:2400:16)
at Vue$3.e.(anonymous function) [as $emit] (chrome-extension://nhdogjmejiglipccpnnnanhbledajbpd/build/backend.js:1:6235)
at VueComponent.importPlayers (eval at <anonymous> (http://rounds.smaa.app:8000/js/app.js:178:1), <anonymous>:98:64)
at Proxy.boundFn (eval at <anonymous> (http://rounds.smaa.app:8000/js/app.js:322:1), <anonymous>:130:14)
at Object.change [as fn] (eval at <anonymous> (http://rounds.smaa.app:8000/js/app.js:261:1), <anonymous>:118:13)
at HTMLInputElement.eval (eval at <anonymous> (http://rounds.smaa.app:8000/js/app.js:322:1), <anonymous>:2229:16)
Run Code Online (Sandbox Code Playgroud)

这是导致错误的代码:

importPlayers(e) {

    eventHub.$emit('AdminAddedPlayers');

    this.importing = true;
    this.success.import = false;
    ...
    ...
}
Run Code Online (Sandbox Code Playgroud)

该组件似乎没有任何其他问题,但这里是完整的组件和 eventHub:

资产/js/components/Admin/AdminImportPlayersComponent

<template>
<div class="component">
    <!-- …
Run Code Online (Sandbox Code Playgroud)

javascript events vue.js

6
推荐指数
1
解决办法
2767
查看次数

laravel app.js文件非常大

我已经向Heroku部署了一个Laravel 5.3应用程序.但是,在加载/登录时,我注意到页面加载时间非常慢.问题似乎是一个非常大的app.js文件:/js/app.js.以下是DevTools中网络资源面板的屏幕截图:screenshot- Network面板.顶部的第三个资源是违规文件.

我不确定为什么这个文件变得如此之大.这是存储库的链接:https://github.com/AshMenhennett/Salon-Pricing.

我无法发布更多链接,如果您想直接链接到特定文件,请告诉我.

我应该怎么做才能缓解这个问题?

javascript laravel webpack

5
推荐指数
4
解决办法
4590
查看次数

检查模型是否存在多对多关系的最佳方法

我有一些数据被发布到服务器并且正在检索Player基于该数据(id).我使用以下代码:

$player = Player::findOrFail($player_data['id']);
Run Code Online (Sandbox Code Playgroud)

但是,我想检查这是否Player属于特定的Team- 一种belongsToMany关系.

有没有比以下更好的方式:

if (! count($player->team()->find($teamId))) {
    // exit early, form may have been 'hacked'
    abort(404);
}
Run Code Online (Sandbox Code Playgroud)

team()而不是teams(),即使它是多对多的.

laravel eloquent

1
推荐指数
1
解决办法
2097
查看次数