Question

我的桌子上有一个清单。它有一个编辑按钮，如果我单击编辑按钮，它将转到另一个名为editTeacher的组件。我的问题是如何从表中获取数据并将其传输到我的editTeacher组件中。我使用axios从路由获取数据。在laravel中就是这样

<a href="/editTeacher/{{$teacher->id}}" class="btn btn-info"><span class="glyphicon glyphicon-pencil"></a>。

我该如何在vue中实现它？

这是我的代码段

<table id="myTable" class="table table-hover">
  <tbody>
   <tr>
    <th>ID</th>
    <th>Image</th>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Gender</th>
    <th>Birthday</th>
    <th>Age</th>
    <th>Type</th>
    <th>Department</th>
    <th>Status</th>
    <th>Actions</th>
   </tr>
   <tr v-for="teacher in teachers" :key="teacher.id">
    <td>{{teacher.id}}</td>
    <td><img style=" border-radius: 50%;" :src="'img/'+teacher.image"  height="42" width="42"/></td>
    <td>{{teacher.firstname}}</td>
    <td>{{teacher.lastname}}</td>
    <td>{{teacher.gender}}</td>
    <td>{{teacher.birthday}}</td>
    <td>{{teacher.age}}</td>
    <td>{{teacher.type}}</td>
    <td>{{teacher.department_name}}</td>
    <td v-if="teacher.status == 1"><span  class="label label-success">Active</span></td>
    <td v-else><span  class="label label-danger">Inactive</span></td>
    <td><router-link to="/viewTeacher"> <i class="fa fa-edit"></i></router-link></td>
   </tr>
  </tbody>
</table>

路线

//Teachers
Route::get('/getTeachers','TeacherController@index');
Route::post('/addTeacher','TeacherController@store');
Route::put('/editTeacher/{id}','TeacherController@update');

app.js路由

{ path: '/viewTeacher', component: require('./components/editTeacher.vue').default },

Answer 1

对于Vue js编辑方法，请遵循以下代码。根据您的git repo。

app.js路由

{ path: '/viewTeacher/:id', component: require('./components/editTeacher.vue').default, name: viewTeacher},

Teachers.vue中的“编辑”按钮

<router-link :to="{name: 'viewTeacher', params: {id: teacher.id}}" class="btn btn-xs btn-default">Edit</router-link>

EditTeacher.vue组件

<template>
   <div class="row">
      <div class="col-xs-3">
          <div class="box">
              <div class="box-tools">
                   <img style="border-radius: 50%;" src=""   height="100" width="50">
              </div>
          </div>
      </div>
      <div class="col-xs-9">
         <div class="box">
              <form v-on:submit.prevent="saveForm()">
                   <div class="row">
                        <div class="col-xs-12 form-group">
                             <label class="control-label">Teacher first name</label>
                              <input type="text" v-model="teacher.firstname" class="form-control">
                        </div>
                   </div>
                   <div class="row">
                        <div class="col-xs-12 form-group">
                            <label class="control-label">Teacher Last name</label>
                            <input type="text" v-model="teacher.lastname" class="form-control">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-12 form-group">
                             <button class="btn btn-success">Update</button>
                        </div>
                   </div>
              </form>
         </div>
      </div>
  </div>
 </template>

<script>
export default {
    mounted() {
        let app = this;
        let id = app.$route.params.id;
        app.teacherId = id;
        axios.get('/getTeacher/' + id)
            .then(function (resp) {
                app.teacher = resp.data;
            })
            .catch(function () {
                alert("Could not load teacher")
            });
    },
    data: function () {
        return {
            teacherId: null,
            teacher: {
                firstname: '',
                lastname: '',                    
            }
        }
    },
    methods: {
        saveForm() {
            var app = this;
            var newTeacher = app.teacher;
            axios.patch('/editTeacher/' + app.teacherId, newTeacher )
                .then(function (resp) {
                    app.$router.replace('/');
                })
                .catch(function (resp) {
                    console.log(resp);
                    alert("Could not Update");
                });
        }
    }
}

Web.php

Route::get('/getTeachers','TeacherController@index');
Route::get('/getTeacher/{id}','TeacherController@show');
Route::post('/addTeacher','TeacherController@store');
Route::put('/editTeacher/{id}','TeacherController@update');

控制器

public function show($id)
{
    return Teacher::findOrFail($id);
}

Vue路由器从Vue路由器链接获取价值

1 个答案: