I am attempting to assign a props value to my component variable. Below is the code I'm working with:
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;
}
}
}
};
However, I encounter 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 have come across suggestions that this could be related to type inferences and can potentially be resolved by using defineComponent (refer to stackoverflow: how to fix the error : Property 'X' does not exist on type '{ object }'. I attempted to implement defineComponent with the following code but did not achieve significant results:
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;
}
}
}
});
If anyone knows how I can resolve this issue, I would greatly appreciate your help.
Thank you for your time.