javascript - vue.js components里data如何做到两个数据的关联？

问题描述

问 题

import slider from './slider'
export default {
     el: '#app',
     data () {
        return {
            someList:[
                {
                    title: 'slide1',
                    img: 'testimg-1.jpg',
                },
                {
                    title: 'slide2',
                    img: 'testimg-2.jpg',
                },
                {
                    title: 'slide3',
                    img: 'testimg-3.jpg',
                }
            ],
            slideinit: {
                pageNum: this.someList.length,
                currentPage: 1,
                canPre : false,
                canNext: true,
                start: {},
                end: {},
                tracking: false,
                thresholdTime: 500,
                thresholdDistance: 100,
            }

        }
    },
    components: {
        slider
    }
}

日前，调用slider组件，需要两个数据，someList和slideinit,slideinit里pageNum等于someList的长度，但this.someList.length报错，未找到this.someList，请问这个问题应该如何处理？

解决方案

slideinit 写成计算属性：

export default {
     el: '#app',
     data () {
        return {
            someList:[
                {
                    title: 'slide1',
                    img: 'testimg-1.jpg',
                },
                {
                    title: 'slide2',
                    img: 'testimg-2.jpg',
                },
                {
                    title: 'slide3',
                    img: 'testimg-3.jpg',
                }
            ]
        }
    },
    components: {
        slider
    },
    computed: {
        slideinit () {
            return {
                pageNum: this.someList.length,
                currentPage: 1,
                canPre : false,
                canNext: true,
                start: {},
                end: {},
                tracking: false,
                thresholdTime: 500,
                thresholdDistance: 100,
            }
        }

这篇关于javascript - vue.js components里data如何做到两个数据的关联？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！