I am currently utilizing vueJS to create a task viewing application.
My goal is to make the div containing the list focus on the newly added list item immediately after adding a new task.
Here's the HTML code from my template for the task list:
<ul>
<li
v-for="task in filteredTasks"
:key="task.id"
id="taskListItem"
ref="taskListItem"
class="taskList d-flex align-items-center justify-content-between"
>
<span> {{ task.name }} </span>
</li>
</ul>
And here are the computed and methods functions I'm using to add and filter tasks:
JavaScript
computed : {
filteredTasks() {
return this.selectedUsers.length
? this.filteredOnProgress.filter((task) =>
task.userIds.some((id) => this.selectedUsers.includes(id))
)
: this.filteredOnProgress;
},
}
methods : {
addTaskName(){
if (this.newTaskName.name != "") {
this.addTask(this.newTaskName)
this.newTaskName.name = ""
}
}
},