My goal is to transition the code below from using the options API to the composition API in Vue while utilizing Typescript.
data() {
return {
items: [
'Car',
'Truck',
'Bike',
'Caravan'
],
activeItem: 0,
show: false,
};
},
methods: {
showDropdown() {
this.show = !this.show;
},
setActiveItem(item) {
this.activeItem = this.items.indexOf(item);
this.show = false;
}
},
computed: {
dropdownItems() {
return this.items.filter((item,i) => i !== this.activeItem)
}
}
This is my current implementation. As a newcomer to Vue and Typescript, I am using this example as a learning opportunity to delve deeper into the composition API along with Typescript.
setup() {
const activeItem = 0;
const show = ref(false);
const items = ref([
'Car',
'Truck',
'Bike',
'Caravan'
]);
function showDropdown(this: any) {
this.show = !this.show;
}
function setActiveItem(this: any, item: string) {
this.activeItem = this.items.indexOf(item);
this.show = false;
}
const dropdownItems = computed(function (this: any, item: string) {
return this.items.filter((item, i) => i !== this.activeItem);
});
return {
activeItem,
show,
items,
showDropdown,
setActiveItem,
dropdownItems,
};
},
The issues I'm encountering include errors such as in the setActiveItem method where it states that
'this' implicitly has type 'any' because it does not have a type annotation.this: any parameters which seems to work, but I am unsure if this is the correct approach.
Another challenge is getting the computed method to function properly. I am struggling to implement it correctly. If anyone can provide assistance on these matters, I would greatly appreciate it.