displaying laravel show method on vue component

Question

i have a list of movies am trying to display the details of one movie using the show method here is my component for all movies

<template>
    <div>
        <el-row :gutter="10">
            <el-col :span="6" v-for="movie in movies" v-bind:key="movie">
                <el-card shadow="always" :body-style="{ padding: '0px'} ">
                    <img v-bind:src="movie.cover_photo" class="image" >
                        <div style="padding: 14px;">
                            <div class="bottom clearfix">

                                <router-link :to="{name:'details',params:{id:movie.id}}">{{movie.title}}</router-link> 
                                    <router-view></router-view>
                                    <h4>{{ movie.year }}</h4>
                                    <h4>{{ movie.type }}</h4>
                            </div>
                            <div class="block">
                                <el-rate  :max="10" ></el-rate>
                            </div>          
                        </div>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    import axios from 'axios'
    export default {
        data() {
            return {
                movies: [],
                movie:{
                    id:'',
                }
            };
        },
        created(){ 
          this. fetchMovieList(); 
          this.showMovie
        },
        methods: {
            fetchMovieList() {
                    axios.get('/movies').then(response => {
                        this.movies = response.data;
                    })
                   .catch(error=>console.log(error))
            },
            showMovie(id){
                axios.get('/movies/'+id).then((res)=>{

                if(res.data.status==true){
                    this.movie= res.data.movie;
                    console.log(res.data.movie)
                }else{
                    alert('No Movie founded with this id')
                }
            })
            .catch((err)=>{alert('error')})
            }
        }
    }
</script>

<style scoped>
.image {
    width: 100%;
    display: block;
  }

</style>

my show method:

public function show($id)
{
        $movie=Movie::find($id);
    if($movie){
        return response()->json(['status'=>true,'movie'=>$movie]);
    }else{
        return response()->json(['status'=>false]);
    }
}

my router on app.js:

const movie=Vue.component('details', require('./components/DetailsComponent.vue').default);


/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */
const router=new VueRouter({
    mode:'history',
    routes:[
        {
            path:'/movie/:id',
            name:'movie',
            component:movie
        },


    ],

});

const app = new Vue({
    el: '#app',
   router,
});

when i click on the router link it just changes the url to the id of the movie but it doesnt show the component with details when i hit the show endpoint with a specific id it returns the movie in json format on the browser

Answer 1

I think your variable of v-for conflict with the same variable of data(). You should try another variable name of v-for. Something like

<el-col :span="6" v-for="value in movies" v-bind:key="movie">
    <el-card shadow="always" :body-style="{ padding: '0px'} ">
        <img v-bind:src="value.cover_photo" class="image" >
        <div style="padding: 14px;">
            <div class="bottom clearfix">
                <router-link :to="{name:'details',params:{id:value.id}}">{{value.title}}</router-link> 
                <router-view></router-view>
                <h4>{{ value.year }}</h4>
                <h4>{{ value.type }}</h4>
            </div>
            <div class="block">
                <el-rate  :max="10" ></el-rate>
            </div>          
        </div>
    </el-card>
</el-col>

Answer 2

Hope this helps you: Reacting to Params Changes

Regards,