axiosを使ってコントローラにPOSTすることができない。
解決したいこと
laravelを使ったブログサイトを作っています。
ブログのタイトルや内容などをaxiosを使ってvueからコントローラに送ることができません。
デベロッパーツールでコンソールやネットワークを確認すると内容自体はちゃんと送られてきているのですが、
コントローラの方でdd($request->all());をやっても何も届いていません。
発生している問題・エラー
エラーは出ていません。
該当するソースコード
create.blade.php
@extends('layouts.app')
@section('content')
<div class="card-header">新規投稿</div>
<div class="card-body">
@if (session('status'))
<div class="alert alert-success" role="alert">
{{ session('status') }}
</div>
@endif
<div class="card">
<div class="card-body">
@if ($errors->any())
<div class="alert alert-danger">
<ul>
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
@end
<div class="form-group" id="app">
<markdown-component></markdown-component>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>
@endsection
MarkdownComponent.vue
<template>
<div>
<div class="form-group">
<label for="exampleInputEmail1">タイトル</label>
<input
type="text"
class="form-control"
id="exampleInputEmail1"
placeholder="title"
name="title"
v-model="title"
/>
</div>
<div class="form-group">
<label for="exampleInputEmail1">カテゴリ</label>
<input
type="text"
class="form-control"
placeholder="category"
name="tagCategory"
v-model="tagCategory"
/>
</div>
<div class="form-group" id="file-preview">
<label for="exampleFormControlFile1">サムネイル</label>
<input
type="file"
ref="file"
class="form-control-file"
id="exampleFormControlFile1"
name="image"
accept="image/*"
v-on:change="onFileChange"
/>
<img
class="userInfo__icon"
v-bind:src="imageData"
v-if="imageData"
style="width: 270px"
/>
<button
class="btn btn-danger"
v-if="imageData"
@click="resetFile()"
>
削除
</button>
</div>
<div class="form-group">
<p>本文</p>
<editor ref="toastuiEditor" />
</div>
<div class="form-group">
<label for="exampleFormControlSelect1">公開設定</label>
<select
input
type="id"
id="exampleFormControlSelect1"
name="is_published"
v-model="is_published"
>
<option value="1">公開</option>
<option value="0">非公開</option>
</select>
</div>
<a href="/posts" class="btn btn-primary" @click="getHTML">DD</a>
<a href="/" class="btn btn-primary">キャンセル</a>
</div>
</template>
<script>
import "codemirror/lib/codemirror.css";
import "@toast-ui/editor/dist/toastui-editor.css";
import { Editor } from "@toast-ui/vue-editor";
export default {
name: "MarkdownComponent",
components: {
editor: Editor,
},
data() {
return {
title: "",
tagCategory: "",
is_published: "",
content:"",
imageData: "",
};
},
methods: {
scroll() {
this.$refs.toastuiEditor.invoke("setScrollTop", 10);
},
moveTop() {
this.$refs.toastuiEditor.invoke("moveCursorToStart");
},
getHTML() {
let HTML = this.$refs.toastuiEditor.invoke("getHTML");
axios
.post("/posts",{
title: this.title,
tagCategory: this.tagCategory,
content: HTML,
is_published: this.is_published,
imageData:this.imageData,
})
.then((res) => {
console.log(res);
this.posts = res.data.posts;
})
.catch((err) => {
console.log(err);
});
},
onFileChange(e) {
const files = e.target.files;
if (files.length > 0) {
const file = files[0];
const reader = new FileReader();
reader.onload = (e) => {
this.imageData = e.target.result;
};
reader.readAsDataURL(file);
}
},
resetFile() {
const input = this.$refs.file;
input.type = "text";
input.type = "file";
this.imageData = "";
},
},
};
</script>
自分で試したこと
なんだか見当違いなことをしている気がしています。形式などが違うのでしょうか？
0
