id を取得してのページの遷移

セレクトボックスで選択後、選択したデータのidを取得して、一覧ページへパラメーターを
乗せて遷移させたいのですが、idを取得できず、http://localhost:3000/top/undefined0. 番号リストとなってしまいます。
どのように修正すればidを取得できますか？

Nuxt.js
1<template>
2<body>
3<div class="title">
4 <p>aaa</p>
5</div>
6 <div class="page_image">
7  <img src="~/assets/image/shika.jpg">
8 </div>
9  <div class="search">
10  <select v-model="category" v-for="category in categories" v-on:change="jump(category.id)">
11  <option value="">選択なし</option>
12  <option v-for="category in categories"
13  value= "category.id">
14    {{category.id}}
15    {{ category.name}}
16  </option>
17</select>
18 </div>
19  </div>
20</div>
21</div>
22</body>
23</template>
24
25<script>
26import axios from 'axios';
27export default{
28data(){
29 return{
30   selected_category_id:'',
31   categories:[],
32   category:[],
33   post:[],
34   id:'',
35   name:'',
36   }
37},
38 created(){
39 //axios.get(`http://127.0.0.1:8000/api/posts`)
40//.then(response => {
41// this.categories = response.data.categories
42 //console.log(response.data)
43 //});
44 this.getCategories()
45
46 },
47  methods:{
48 getCategories: function(){
49 axios.get(`http://127.0.0.1:8000/api/posts`)
50.then(response => {
51 this.categories = response.data.categories
52 console.log(response.data)
53 });
54 },
55 jump:function(id){
56    this.$router.push({ path: `top/${id}`});
57  }
58  },
59
60}
61</script>
62
63```Nuxt.js _id.vue
64

<template> <v-row justify="center"> <h2>URLパラメータ取得結果：route.params</h2> {{ this.$route.params.id }}<br> <br> {{this.$route.params.name}} {{ this.$route.params.content }}<br> </v-row> </template> <script> import axios from 'axios'; export default { created(){ axios.get(`http://127.0.0.1:8000/api/top/${this.$route.params.id}`) .then(response => { this.posts = response.data.post console.log(response.data) }); }, data () { return { params:'', post:[], id:'', name:'', content:'', } }, methods: { returnPage() { this.$router.go(-1); }, } } </script>

行動規範の内容に同意します

回答1件

ベストアンサー

<select v-model="category_id" v-on:change="jump(category_id)"> <option value="">選択なし</option> <option v-for="category in categories" :value= "category.id" > {{category.id}} {{ category.name}} </option>

v-modelにcategory_id、jump関数にcategory_idを設定するとidを取得できました。

投稿2021/05/04 07:04

退会済みユーザー

総合スコア0