Question

我是laravel，axios和vue的新手，我使用this tutorial帮助制作待办事项列表：

我想通过允许不同的用户存储和查看他们的任务来调整基本教程。我添加了新的用户注册和登录，但每个用户都会看到每个人的列表，而不仅仅是他们的列表。因此，我在User和Task模型之间建立了一对多的关系，并将这些方法添加到模型中：

class User extends Authenticatable
{
    ...
    public function tasks()
    {
        return $this->hasMany('App\Task');
    }
}

class Task extends Model
{
    ...
    public function user()
    {
        return $this->belongsTo('App\User');
    }
}

我更新了TaskController.php和TaskList.vue以仅显示活动用户的任务，但现在在视图中没有显示列表，也无法添加新任务。

以下是两者的代码。除了我在我添加的部分旁边评论时，一切都与教程相同：

<?php

namespace App\Http\Controllers;

use App\Task;
use Illuminate\Http\Request;

class TaskController extends Controller
{
  $user = Auth::user();        //Added by me

  public function index()
  {
      return Task::latest()->where('user_id', $user->id)->get();    //Added by me, 
      //this query returns whats expected in php artisan tinker
      //was previously return Task::latest()->get();
      //I also tried this: return $this->user->tasks->toJSON()
  }
  public function store(Request $request)
  {
      $this->validate($request, [
          'body' => 'required|max:500'
      ]);

      return Task::create([
                'body' => request('body'),
                'user_id' => $user->id        //Added by me 
              ]);
  }
  public function destroy($id)
  {
      $task = Task::findOrFail($id);
      $task->delete();
      return 204;
  }
}

在TaskList.vue

中

<template>
    <div class='row'>
        <h1>My Tasks</h1>
        <h4>New Task</h4>
        <form action="#" @submit.prevent="createTask()">
            <div class="input-group">
                <input v-model="task.body" type="text" name="body" class="form-control" autofocus>
                <span class="input-group-btn">
                    <button type="submit" class="btn btn-primary">New Task</button>
                </span>
            </div>

        </form>
        <h4>All Tasks</h4>
        <ul class="list-group">
            <li v-if='list.length === 0'>There are no tasks yet!</li>
            <li class="list-group-item" v-for="(task, index) in list">
                 {{ task.body }}
                 <button @click="deleteTask(task.id)" class="btn btn-danger btn-xs pull-right">Delete</button>
            </li>
        </ul>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                list: [],
                task: {
                    id: '',
                    body: '',
                    user_id: ''        ///Added by me
                }
            };
        },

        created() {
            this.fetchTaskList();
        },

        methods: {
            fetchTaskList() {
                axios.get('api/tasks').then((res) => {
                    this.list = res.data;
                });
            },

            createTask() {
                axios.post('api/tasks', this.task)
                    .then((res) => {
                        this.task.body = '';
                        this.task.user_id = '';        ///added by me
                        this.edit = false;
                        this.fetchTaskList();
                    })
                    .catch((err) => console.error(err));
            },

            deleteTask(id) {
                axios.delete('api/tasks/' + id)
                    .then((res) => {
                        this.fetchTaskList()
                    })
                    .catch((err) => console.error(err));
            },
        }
    }
</script>
</script>

该应用程序一直有效，直到我添加了上面提到的几行。现在显示屏上没有显示任何内容，也无法添加任何新任务。我是laravel的新手，对于axios和vue来说是全新的，但对我来说，似乎我添加的东西应该起作用。我运行时没有错误消息，它只是没有产生我想要的东西。

显示列表Vue Axios与Laravel

0 个答案: