最新消息:XAMPP默认安装之后是很不安全的,我们只需要点击左方菜单的 "安全"选项,按照向导操作即可完成安全设置。

LARAVEL學習 DAY 21 VUE.JS(五)

XAMPP下载 admin 578浏览 0评论
 LARAVEL學習 DAY 21 VUE.JS(五)
前言

正文
來 我們再來改router 多一個show

{
path: ‘/:id’,
component: require(‘./components/Show’)
}
那個:id就是post的id 隨便帶什麼進去他都吃
然後那個Show呢 就長這樣

<template>
<div class=”container” v-if=”post”>
<h1>{{ post.title }}</h1>
<div>{{ post.content }}</div>
<router-link class=”btn btn-default” to=”/”>返回</router-link>
<router-link class=”btn btn-primary” :to=”`/${post.id

}/edit`”>編輯</router-link>
<button class=”btn btn-danger” data-toggle=”modal” data-target=”#myModal”>刪除</button>
<div class=”modal fade” id=”myModal” tabindex=”-1″ role=”dialog” aria-labelledby=”myModalLabel”>
<div class=”modal-dialog” role=”document”>
<div class=”modal-content”>
<div class=”modal-body”>
<h4>是否刪除?</h4>
</div>
<div class=”modal-footer”>
<button type=”button” class=”btn btn-default” data-dismiss=”modal”>取消</button>
<button type=”button” class=”btn btn-danger” data-dismiss=”modal” @click=”destroy”>刪除</button>
</div>
</div>
</div>
</div>
</div>
</template>

<script>
export default {
data: () => {
return {
post: null
};
},
created() {
const id = this.$route.params.id

;
axios.get(`api/crud/${id}`).then(response => {
this.post = response.data.post;
});
},
methods: {
destroy() {
axios.delete(`api/crud/${this.post.id

}`).then(() => {
this.$router.push(‘/’);
});
}
}
};
</script>
好像沒有什麼東西可以講…
就只是東西很多
哦對了 : 也就是v-bind: 可以讓一個原本是靜態的東西變成動態的 讓它的裡面可以放一些變數

結語

转载请注明:XAMPP中文组官网 » LARAVEL學習 DAY 21 VUE.JS(五)

您必须 登录 才能发表评论!