前提・実現したいこと
laravel Nuxt.jsを使って、セレクトボックスを作成しています。
発生している問題・エラーメッセージ
セレクトボックスでボックスの中に選択なしは表示されるのですが、categoryのnameが表示されないのですが、どうすれば表示されますか？
プラウザのconsoleに配列が表示されるのですが、
画面上には表示されません。
ソースコード
Nuxt.js
コード
<template>
<body>
<div class="title">
<p>鹿と大仏だけじゃない奈良を知る</p>
</div>
<div class="page_image">
<img src="~/assets/image/shika.jpg">
</div>
<div class="search">
<select v-model="selected_category_id">
<option value="">選択なし</option>
<option v-for="category in categories" value="category.id">
{{ category.name}}
</option>
</select>
</div>
</div>
</div>
</body>
</template>
<script>
import axios from 'axios';
export default{
data(){
return{
selected_category_id:'',
categories:[],
id:'',
name:'',
}
},
created(){
axios.get(`http://127.0.0.1:8000/api/posts`)
.then(response => {
this.categories = response.data
console.log(response.data)
});
},
methods:{
onSubmit:function(){
axios.post(`http://127.0.0.1:8000/api/`,
{
id:this.id,
name: this.name,
content: this.content,
})
.then(response=>{
this.posts = response.data
console.log(response.data);
this.name = '';
this.content = '';
this.saved = true;
});
this.$router.push({ path: `./post`});
}
},
}
</script>
Laravel PostController.php
コード
public function index(Request $request)
{
$category = Category::all();
return response()->json(['categories'=>$category],200);
}
api.php
```api.php
Route::get('/posts','PostController@index');
Q&A
