data() not showing vuejs components

Question

when i list data on page while console vue data() showing properly. like this check on console.

but i filter data with same page data() is not showing like this check console

this is my code

<script>
import AppLayout from '../../Layouts/AppLayout'
import Pagination from '../../Pages/Common/Pagination'
export default {
    props: [
        'videos',
        'request',
    ],

    components: {
        AppLayout,
        Pagination
    },

    data() {
        return {
            key:'',
            src: null ? '' : this.$page.props.baseUrl +'/storage/videos/' + this.videos.data[0]['filename'] ,
            title: null ? '' : this.videos.data[0]['title'],
            videoImage: this.$page.props.baseUrl + '/assets/images/img/video.jpg',
            nextTitle : null ? '' : this.videos.data[1]['title'],
        }
    },
    
    methods:{
        changeVideo(filename, title, index) {
            this.$data.src = this.$page.props.baseUrl +'/storage/videos/' + filename;
            this.$data.title = title;
            this.$data.key = index;

            if(this.videos.data.length-1 <= index) {
                index = 0;
                this.$data.nextTitle = this.videos.data[index]['title'];
            } else {
                this.$data.nextTitle = this.videos.data[index+1]['title'];
            }
            
            //Force video load.
            var vid = this.$refs.video;
            vid.load();
        },

        filterdata() {
            this.$inertia.get(this.route('trainingModule.index'), this.request)
        },

        nextVideo(n) {
            if(this.videos.data.length-1 <= n) {
                n = 0;
                this.$data.key = n;
            } 

            this.$data.src = this.$page.props.baseUrl +'/storage/videos/' + this.videos.data[n]['filename'];
            this.$data.title = this.videos.data[n]['title'];
            this.$data.nextTitle = this.videos.data[n+1]['title'];
        }
    }
}
</script>

please help me why this issue showing me. and why data not showing after filter

You have 5 errors in your console. If you fix those your data will probably show up. — bassxzero, Apr 13 '21 at 12:20
Also, `nextTitle : null ? '' : this.videos.data[1]['title'],` these expressions are pointless and will always return the second option. — bassxzero, Apr 13 '21 at 12:21
@bassxzero this 5 error because they didnt get data() values — Vicky Nehare, Apr 13 '21 at 12:30
is there a reason why do you use `$` everywhere? why not declare data from `this.$data.nextTitle` to this `this.nextTitle` ... — wittgenstein, Apr 13 '21 at 12:34
@wittgenstein no reason , i use that way also.. not effected — Vicky Nehare, Apr 13 '21 at 12:38
Looks like `this.videos.data` or `this.videos` is undefined when your component is rendered. Add `v-if="this.videos && this.videos.data"` to your `Index` component's definition. — bassxzero, Apr 13 '21 at 12:42
I answered something very similar yesterday. https://stackoverflow.com/questions/67014513/uncaught-typeerror-props-currentquestion-is-undefined-vue/67014643#67014643 — bassxzero, Apr 13 '21 at 12:43

score 0 · Answer 1 · answered Apr 13 '21 at 12:59

In your Inertia component, you have something that looks like this.

<template>
    <div>
      <Index
      :videos="videos"
      :request="request"      
      ></Index>
    </div>
</template>

<script>

export default{
    name: 'Inertia',
    props: {

    },
     components: {
        Index,
    },
}
</script>

Add a v-if condition to it like this so that it doesn't render until the data exists to be passed to the child component.

<template>
    <div>
      <Index
       v-if="videos && videos.data"
      :videos="videos"
      :request="request"      
      ></Index>
    </div>
</template>

<script>

export default{
    name: 'Inertia',
    props: {

    },
     components: {
        Index,
    },
}
</script>

data() not showing vuejs components

1 Answers1