Маршрутизатор вуе получить значение из Link маршрутизатор вю
У меня есть список с моего стола. У него есть кнопка редактирования, и если я нажму кнопку редактирования, он перейдет к другому компоненту, который называется 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');
У вопроса есть решение - Посмотреть?

Похоже, вам нужно рассмотреть возможность использования глобального управления состоянием, использование vuex решит ваши проблемы.
Источник

Я новичок в vue, и я хочу только простой способ исправить это. Простите сэр
Источник
Ответы - Маршрутизатор вуе получить значение из Link маршрутизатор вю / Vue router get value from vue router link

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

спасибо, сэр. позвольте мне попробовать это. позвольте мне задать вопросы позже

данные пусты, сэр. но я получаю удостоверение личности. Как я могу это исправить?

не могли бы вы объяснить мне ваш код, сэр?

мой РЕПО здесь Пожалуйста помогите мне если у вас есть немного времени сэр github.com/vincesanityyy/capstoneproject

@Винс я обновил ответ, пожалуйста, проверьте. Я дал тебе основную идею.

хорошо, сэр, я буду. Большое спасибо

почему я получил ошибки сэр? Вы тестировали мой проект РЕПО?

@Винс у меня нет достаточно времени, чтобы проверить ваше РЕПО. Но что такое ошибка случиться?

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 'fname' of undefined"
и Cannot read property 'fname' of undefined

@Vince ошибка возникает, потому что имя столбца "firstname" не
fname
или lastname
не lname
. У меня есть обновление ответа.

хорошо, подождите, я проверю еще раз. простите что отнимаю у вас время сэр

та же ошибка, что и у меня, сэр. всегда это
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"
Помочь в развитии проекта: