data() 未显示 vuejs 组件答案

【问题标题】：data() not showing vuejs componentsdata() 未显示 vuejs 组件
【发布时间】：2021-07-08 11:49:50
【问题描述】：

当我在页面上列出数据而控制台 vue data() 正确显示时。像控制台上的这个检查。

但是我用相同的页面过滤数据 data() 没有像这个检查控制台那样显示

这是我的代码

<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>

请帮助我为什么这个问题显示给我。以及为什么过滤后数据不显示

【问题讨论】：

您的控制台中有 5 个错误。如果你修复了这些，你的数据可能会显示出来。
另外，nextTitle : null ? '' : this.videos.data[1]['title'], 这些表达式毫无意义，总是会返回第二个选项。
@bassxzero 这 5 个错误，因为他们没有得到 data() 值
发布错误
@bassxzero 更新

标签： vue.js

【解决方案1】：

在您的 Inertia 组件中，您有一些看起来像这样的东西。

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

<script>

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

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

像这样向它添加一个v-if 条件，这样它就不会呈现，直到存在要传递给子组件的数据。

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

<script>

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

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

【讨论】：