This is my post page:
<template>
<br/>
<pagination
@pageClicked="getPage($event)"
v-if="this.getdArray.data != null"
:links="this.getdArray.links"
/>
<a
:href="route('create',{region1:this.region})"
class="list-group-item list-group-item-action w-25 float-right text-gray-200 align-text-bottom"
style="background-color: rgb(00, 00, 00)"
>
글작성
<!-- {{ this.getdArray }} -->
</a>
<div v-for="post in this.getdArray.data" :key="post.id">
<a
:href="route('show',{'id': post.id},{region1:this.region})"
class="list-group-item list-group-item-action w-100 float-right text-gray-200 "
style="background-color: rgb(50, 60, 60)"
>
{{post.title}}
</a>
</div>
</template>
<script>
import {InertiaLink} from "@inertiajs/inertia-vue3";
import Pagination from "./Pagination.vue";
export default {
data(){
return{
postdata: []
}
},
methods: {
check(){
console.log(this.postRegion);
},
getPage(url) {
axios
.get(url)
.then((res) => {
this.getdArray = res.data;
console.log(res.data);
})
.catch((err) => {
console.log(err);
});
},
},
props: [
'regionN', 'posts','dArray'
],
data() {
return {region: "", getposts: [],getdArray:[]}
},
beforeMount() {
this.region = this.regionN;
this.getposts = this.posts;
this.getdArray=this.dArray;
// console.log(this.getposts);
console.log(this.region);
console.log(this.getposts);
console.log(this.getdArray);
},
components: {
InertiaLink,
Pagination
},
computed: {
postRegion: function () {
return this
.getposts
.filter((post) => {
if (post.region == this.region) {
return post
}
});
}
//computed 로 필요한 데이터만 반환
//.filter 함수는 배열에 적용가능하며 배열내 각 원소에 적용
}
}
</script>
And this is my pagination page:
<template>
<div v-if="links.length > 3">
<div class="flex flex-wrap -mb-1">
<template v-for="(link, key) in links">
<div
v-if="link.url === null"
:key="key"
class="px-4 py-3 mb-1 mr-1 text-sm leading-4 text-gray-400 border rounded"
v-html="link.label"
/>
<div
v-else
@click="pageClicked(link.url)"
:key="link.url"
class="px-4 py-3 mb-1 mr-1 text-sm leading-4 border rounded hover:bg-white focus:border-indigo-500 focus:text-indigo-500"
:class="{ 'bg-white': link.active }"
:href="link.url"
v-html="link.label"
></div>
</template>
</div>
</div>
</template>
<script>
export default {
props: {
links: Array,
},
methods: {
pageClicked(url) {
this.$emit("pageClicked", url);
},
},
};
</script>
When I push list button,
something like
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title inertia>Laravel</title>
This kind of thing send by res.data
How can I fix it? On other people's code, res.data has data and link,
but on my res.data, HTML code send back.
this is my controller
<?php
namespace App\Http\Controllers;
use App\Models\Post;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\DB;
use Illuminate\Support\Facades\Http;
use Illuminate\Support\Facades\Redirect;
use Illuminate\Support\Facades\Storage;
use Inertia\Inertia;
use Symfony\Component\Console\Input\Input;
class PostController extends Controller
{
// public function index()
// {
// //
// }
public function create(Request $request)
{
$region1 = $request->region1;
return Inertia::render('Create', ["region1" => $region1]);
}
public function store(Request $request)
{
$request->validate([
'title' => 'required|min:3',
'content' => 'required|min:3',
'image' => 'image',
// 'region1' => 'required'
]);
// $user_id = Auth::user()->id;
// $region =
// $request->region1;
$post = new Post();
$post->user_id = Auth::user()->id;
$post->title = $request->title;
$post->content = $request->content;
//inertia 에서의 post요청
//function storePost() {
//form.post('/post/store')
//}
//와 같이.
$path = $request->file('image')->store('image', 'public');
$imgpath = "/storage/" . $path;
$post->image = $imgpath;
$post->region = $request->region;
$post->save();
// $validated = array_merge($validated, ['image' => $imgpath]);
// $validated = array_merge($validated, ['user_id' => $user_id]);
// $validated = array_merge($validated, ['region' => $region]);
// Post::create($validated);
// if ($request->hasFile('image')) {
// $image_path = $request->file('image')->store('image', 'public');
// }
// $post = new Post();
// $post->title = $request->title;
// $post->content = $request->content;
// $post->user_id = Auth::user()->id;
// $post->region = $request->region;
// $post->image = "/storage/" . $image_path;
// $posts = Post::all();
// $b2018 = DB::table('crimes')->get();
// $t2018 = json_decode(json_encode($b2018), true);
// $region1 = $request->region1;
// $posts = Post::find($post->id);
return Redirect::route('main');
}
public function show($id)
{
$posts = Post::find($id);
return Inertia::render('Show', ["posts" => $posts]);
}
public function edit($id)
{
$post = Post::find($id);
return Inertia::render('Edit', ["post" => $post]);
}
public function update(Request $request, $id)
{
$post = Post::find($id);
$post->title = $request->title;
$post->content = $request->content;
$post->user_id = Auth::user()->id;
if ($request->hasFile('image')) {
$fileName = time() . '_' . $request->file('image')->getClientOriginalName();
$request->file('image')->storeAs('public/images', $fileName);
if ($fileName) {
$input = array_merge($input, ['image' => $fileName]);
}
}
$post->save();
$posts = Post::find($id);
return Inertia::render('Show', ["posts" => $posts]);
}
public function destroy($id)
{
$post = Post::find($id);
$post->delete();
if ($post->image) {
Storage::delete('public/images/' . $post->image);
}
return Inertia::render('question');
}
}
i added my controller, and i tried to fix it but it still sent request twice...
I think problem is in your Laravel back-end or bad request in front-end side, sometime laravel return error in HTML format, if you not defined accept application/json in your request headers.
Try to resolve that problem first, and edit your question.