混分混分 躺分躺分

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的部分 沒意外的話是最簡單的地方...