Блог

Я использую VueJS для создания приложения для просмотра задач

когда я добавляю новую задачу, я хочу, чтобы div, содержащий список, немедленно фокусировался на вновь добавленном элементе списка

ниже приведен мой HTML-код в шаблоне для списка задач

 <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>

 

ниже приведены мои функции в computed и методы добавления и фильтрации задач

скрипт

 
 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 = ""
      }
     }
 },
 

Я решаю свою проблему следующим образом

Я дал моему неупорядоченному списку идентификатор =»taskListul»

и в методах я добавил функцию:

   scrollToEndOfTask() {
      const taskScroll = this.$el.querySelector("#taskListul")
      const scrollHeight = taskScroll.scrollHeight
      taskScroll.scrollTop = scrollHeight
    },
 

Я вызвал эту функцию в методе обновления экземпляра vue

 updated() {
    this.scrollToEndOfTask()
  },