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

LARAVEL學習 DAY 20 VUE.JS(四)

XAMPP下载 admin 549浏览 0评论
 LARAVEL學習 DAY 20 VUE.JS(四)
前言

正文
接下來要講的是create頁面
先幫我改個東西 在api的Controller裡面

public function store(Request $request)
{
$data = $request->only(‘title’, ‘content’);
$post = $this->CRUDRepo->create($data);
return response()->json([‘status’ => ‘success’, ‘post’ => $post]);
}
因為等等會用到 上次忘記打了

然後來改我們的router.js

import VueRouter from ‘vue-router’;

const routes = [
{
path: ‘/’,
component: require(‘./components/Index’)
},
{
path: ‘/create’,
component: require(‘./components/Create’)
}
];

const router = new VueRouter({ routes });
export default router;
再來是頁面的code
resources/assets/js/components/Create.vue

<template>
<div>
<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” cols=”30″ rows=”10″ v-model=”content”></textarea>
</div>
<router-link class=”btn btn-default” to=”/”>返回</router-link>
<button class=”btn btn-primary” @click=”send”>送出</button>
</div>
</template>

<script>
export default {
data: () => {
return {
title: ”,
content: ”
};
},
methods: {
send() {
const title = this.title.trim();
const content = this.content.trim();
axios
.post(‘api/crud’, {
title: title,
content: content
})
.then(response => {
const post = response.data.post;
this.$router.push(`/${post.id

}`);
});
}
}
};
</script>
首先 我們不需要name 因為不是用form 來送資料的了
不過我們要用v-model來取代它 用它來接值 然後在template裡面不需使用this 但是script裡面就要了
@click的話上一篇有解釋過了 再來就到script的部分
data定義初值之後就要來寫送資料的function了
send這個function先拿到要的東西 然後再進行trim 就是刪除字串前後空白 也可以不用
送完資料之後如果沒有錯誤就直接跳轉了
跳轉所使用的是vue-router的function $router.push 這個用法跟router-link的to一樣

結語
下一篇會講到show的部分 沒意外的話是最簡單的地方…

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

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