前言
無
正文
繼續貼code…
router
{
path: ‘/:id/edit’,
component: require(‘./components/Edit’)
}
edit
<template>
<div class=”container”>
<div class=”form-group”>
<label for=”title”>標題</label>
<input type=”text” class=”form-control” v-model=”title”>
</div>
<div class=”form-group”>
<label for=”content”>內容</label>
<textarea class=”form-control” name=”content” cols=”30″ rows=”10″ v-model=”content”></textarea>
</div>
<router-link class=”btn btn-default” :to=”`/${
post.id
}`”>返回</router-link>
<button type=”button” class=”btn btn-primary” @click=”send”>送出</button>
</div>
</template>
<script>
export default {
data: () => {
return {
post: null,
title: ”,
content: ”
};
},
created() {
const id = this.$route.params.id
;
axios.get(`api/crud/${id}`).then(response => {
const post = response.data.post;
this.post = post;
this.title = post.title;
this.content = post.content;
});
},
methods: {
send() {
const title = this.title.trim();
const content = this.content.trim();
axios
.put(`api/crud/${this.post.id
}`, {
title: title,
content: content
})
.then(response => {
const post = response.data.post;
this.$router.push(`/${this.post.id
}`);
});
}
}
};
</script>
這次就是之前全部的結合 然後這篇就是vue的最後一篇了
結語
還剩8篇 我再來想想要講什麼玩意
转载请注明：XAMPP中文组官网 » LARAVEL學習 DAY 22 VUE.JS（六）