how can i make filter of tasks by name here? - vue.js

Question

<template lang="pug">
.kanban
.statuses
.todo(#drop="onDrop($event,'todo')"
#dragenter.prevent
#dragover.prevent)
span To do
tasks-order-by-status(:tasks = 'taskTodo')
.inprogress(#drop="onDrop($event,'inprogress')"
#dragenter.prevent
#dragover.prevent)
span In Progress
tasks-order-by-status(:tasks = 'taskInprog')
.done(#drop="onDrop($event,'done')"
#dragenter.prevent
#dragover.prevent)
span Done
tasks-order-by-status(:tasks = 'taskDone')
</template>
<script lang="ts">
import { computed, defineComponent } from 'vue'
import { TaskStatusEnum } from './../enums/TaskStatusEnum'
import TasksOrderByStatus from '#/components/TasksOrderByStatus.vue'
import { useStore } from 'vuex'
import { emitter } from '../main'
import { TaskInterface } from '#/types/task.interface'
export default defineComponent({
setup () {
const store = useStore()
const tasks = computed(() => store.state.tasks)
return {
tasks
}
},
components: {
TasksOrderByStatus
},
data () {
return {
TaskStatusEnum,
showDetailsModal: false,
task: '',
taskTodo: [] as TaskInterface[],
taskInprog: [] as TaskInterface[],
taskDone: [] as TaskInterface[]
}
},
methods: {
setArrayByStatuses () {
for (let i = 0; i < this.tasks.length; i++) {
if (this.tasks[i].status === TaskStatusEnum.INPROGRESS) {
const item = this.tasks[i]
this.taskInprog.push(item)
}
if (this.tasks[i].status === TaskStatusEnum.TODO) {
const item = this.tasks[i]
this.taskTodo.push(item)
}
if (this.tasks[i].status === TaskStatusEnum.DONE) {
const item = this.tasks[i]
this.taskDone.push(item)
}
}
}
},
mounted () {
this.setArrayByStatuses()
}
})
</script>
how can i make filter of tasks by name here?
I tried to do this
computed: {
filteredList () {
return this.tasks.filter(task => {
return task.name.toLowerCase().includes(this.search.toLowerCase())
})
}
},
but i have this error Property 'tasks' does not exist on type 'CreateComponentPublicInstance<{ [x: string & on${string}]: ((...args: any[]) => any) | undefined; } | { [x: string & on${string}]: undefined; }, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, ... 10 more ..., {}>'.
Property 'tasks' does not exist on type '{ $: ComponentInternalInstance; $data: {}; $props: { [x: string & on${string}]: ((...args: any[]) => any) | undefined; } | { [x: string & on${string}]: undefined; }; ... 10 more ...; $watch(source: string | Function, cb: Function, options?: WatchOptions<...> | undefined): WatchStopHandle; } & ... 4 more ... & Co...'.

Answer 1

The setup() method does not work like you expect, it will not initiate data attributes (https://v3.vuejs.org/guide/composition-api-setup.html#accessing-component-properties)
Use mounted() instead and assign
this.tasks = tasks
also add tasks to your data object.