Question

我有以下端点：

Route::get('/tasks', function(){
    return Task::latest()->pluck('body');
});

Route::get('/projects/{project}', function(Project $project){
    $project->load('tasks');
    return view('projects.show', compact('project'));
});

Route::get('/api/projects/{project}', function(Project $project){
    return $project->tasks->pluck('body');
});

Route::post('/api/projects/{project}/tasks', function(Project $project){
    $task = $project->tasks()->create(request(['body']));
    TaskCreated::dispatch($task);
    return $task;
});

在我的project.show视图中，我称该组件。我打开了两个分别具有登录用户的浏览器。

点击Tab键后，我想保存一个特定项目的任务，所以vue模板如下所示：

<ul>
    <li v-for="task in tasks" v-text="task"></li>
</ul>
<input type="text" v-model="newTask" @blur="addTask">

我的脚本如下：

export default {
    data(){
        return {
            tasks: [],
            newTask: ''
        }
    },
    created() {
        axios.get('/tasks').then(response => (this.tasks = response.data));

        window.Echo.private('tasks. ' + this.project.id).listen('TaskCreated', e =>{
            this.tasks.push(e.task.body);
        });
    },
    methods: {

        addTask(){
            axios.post('/api/projects/${this.project.id}/tasks', {body: this.newTask})
            .then(response => response.data)
            .then(this.addTask);
        },
        show(){
            tasks.push(this.newTask);

            this.newTask = '';
        }
    }
}

当我输入Chrome中的任务时，我想立即在其他浏览器中查看它。此刻，当我输入任务并按下Tab键时，什么也没发生。

如何在视图模板中解决此问题？

私人频道不适用于Laravel-echo

0 个答案: