Маршрутизатор вуе получить значение из Link маршрутизатор вю

Маршрутизатор вуе получить значение из Link маршрутизатор вю

04.12.2019 04:20:28 Просмотров 72 Источник

У меня есть список с моего стола. У него есть кнопка редактирования, и если я нажму кнопку редактирования, он перейдет к другому компоненту, который называется editTeacher. Мой вопрос заключается в том, как я могу получить данные из таблицы и передать их в свой editTeacher .

Как я мог достичь этого в vue?

Вот мой фрагмент кода

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

Маршрут

<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>

апп.JS маршрут

//Teachers
Route::get('/getTeachers','TeacherController@index');
Route::post('/addTeacher','TeacherController@store');
Route::put('/editTeacher/{id}','TeacherController@update');
У вопроса есть решение - Посмотреть?

https://stackoverflow.com/questions/59177031/vue-router-get-value-from-vue-router-link#comment104578049_59177031
Похоже, вам нужно рассмотреть возможность использования глобального управления состоянием, использование vuex решит ваши проблемы.
https://stackoverflow.com/questions/59177031/vue-router-get-value-from-vue-router-link#comment104578086_59177031
Я новичок в vue, и я хочу только простой способ исправить это. Простите сэр

Ответы - Маршрутизатор вуе получить значение из Link маршрутизатор вю / Vue router get value from vue router link

Amit Senjaliya

04.12.2019 04:56:18

Пожалуйста, следуйте приведенному ниже коду для метода редактирования Vue js. Как в Git РЕПО.

апп.JS маршрут

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

Кнопка редактирования в учителях.вю

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

EditTeacher.компонент вю

<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");
                });
        }
    }
}

Сеть.в 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);
}
https://stackoverflow.com/questions/59177031/vue-router-get-value-from-vue-router-link/59177671#comment104576906_59177671
спасибо, сэр. позвольте мне попробовать это. позвольте мне задать вопросы позже
https://stackoverflow.com/questions/59177031/vue-router-get-value-from-vue-router-link/59177671#comment104577579_59177671
данные пусты, сэр. но я получаю удостоверение личности. Как я могу это исправить?
https://stackoverflow.com/questions/59177031/vue-router-get-value-from-vue-router-link/59177671#comment104577924_59177671
не могли бы вы объяснить мне ваш код, сэр?
https://stackoverflow.com/questions/59177031/vue-router-get-value-from-vue-router-link/59177671#comment104578270_59177671
мой РЕПО здесь Пожалуйста помогите мне если у вас есть немного времени сэр github.com/vincesanityyy/capstoneproject
https://stackoverflow.com/questions/59177031/vue-router-get-value-from-vue-router-link/59177671#comment104596807_59177671
@Винс я обновил ответ, пожалуйста, проверьте. Я дал тебе основную идею.
https://stackoverflow.com/questions/59177031/vue-router-get-value-from-vue-router-link/59177671#comment104596959_59177671
хорошо, сэр, я буду. Большое спасибо
https://stackoverflow.com/questions/59177031/vue-router-get-value-from-vue-router-link/59177671#comment104597062_59177671
почему я получил ошибки сэр? Вы тестировали мой проект РЕПО?
https://stackoverflow.com/questions/59177031/vue-router-get-value-from-vue-router-link/59177671#comment104597084_59177671
@Винс у меня нет достаточно времени, чтобы проверить ваше РЕПО. Но что такое ошибка случиться?
https://stackoverflow.com/questions/59177031/vue-router-get-value-from-vue-router-link/59177671#comment104597091_59177671
Property or method "teacher" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.
https://stackoverflow.com/questions/59177031/vue-router-get-value-from-vue-router-link/59177671#comment104597096_59177671
также Эта Error in render: "TypeError: Cannot read property 'fname' of undefined" и Cannot read property 'fname' of undefined
https://stackoverflow.com/questions/59177031/vue-router-get-value-from-vue-router-link/59177671#comment104597258_59177671
@Vince ошибка возникает, потому что имя столбца "firstname" не fnameили lastnameне lname. У меня есть обновление ответа.
https://stackoverflow.com/questions/59177031/vue-router-get-value-from-vue-router-link/59177671#comment104597278_59177671
хорошо, подождите, я проверю еще раз. простите что отнимаю у вас время сэр
https://stackoverflow.com/questions/59177031/vue-router-get-value-from-vue-router-link/59177671#comment104597366_59177671
та же ошибка, что и у меня, сэр. всегда это Property or method "teacher" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.и Error in render: "TypeError: Cannot read property 'firstname' of undefined"
Закрыть X