Vue.js how to set a component variable with props value-CodePudding

I'm trying to set my component variable with a props value. Here is my code:

export default {
    props: {
        // eslint-disable-next-line vue/require-default-prop
        multiPaginatedTableTitle: {
            type: String,
            required: false
        },
        // eslint-disable-next-line vue/require-default-prop
        lists: {
            type: Array,
            required: false
        }
    },
    // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
    data: function(): any {
        return {
            selectedList: this.lists[0]
        };
    },
    // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
    created: function(){
        this.selectedList = this.lists[0];
    },
    methods: {
        // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
        changeSelectedItems: function(index: string){
            const newSelectedList: any = this.lists.find((x: { index: string; }) => x.index == index);
            if (newSelectedList != undefined) {
                this.selectedList = newSelectedList;
            }
        }
    }
};

but I get an error:

Property 'lists' does not exist on type '{ props: { multiPaginatedTableTitle: { type: StringConstructor; required: boolean; }; lists: { type: ArrayConstructor; required: boolean; }; }; data: () => any; created: () => void; methods: { ...; }; }'.

I've found that it could be linked to type inferences and that can be manage with the use of defineComponent (cf. stackoverflow: how to fix the error : Property 'X' does not exist on type '{ object }'. I tried to use defineComponent with the code below but didn not get much result:

import defineComponent from 'vue';

export default new defineComponent({
    props: {
        // eslint-disable-next-line vue/require-default-prop
        multiPaginatedTableTitle: {
            type: String,
            required: false
        },
        // eslint-disable-next-line vue/require-default-prop
        lists: {
            type: Array,
            required: false
        }
    },
    // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
    data: function(): any {
        return {
            selectedList: this.lists[0]
        };
    },
    // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
    created: function(){
        this.selectedList = this.lists[0];
    },
    methods: {
        // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
        changeSelectedItems: function(index: string){
            const newSelectedList: any = this.lists.find((x: { index: string; }) => x.index == index);
            if (newSelectedList != undefined) {
                this.selectedList = newSelectedList;
            }
        }
    }
});

Does someone know how I can manage to do that ?

Thanks for your time.

CodePudding user response：

Try replace 'required: false' to 'default: () => []' it should prevent your error while props will be loaded I think that in created() hook you could not getting any props so try mounted()

CodePudding user response：

Ran into this a while ago, has something to do with the scope of the data function i believe. If you define your data function as follows it should work:

export default {
    ...

    data() {
        return {
            ....
        }
    },

    ...
}