如何在 vueJS 中滚动查看新添加的列表项

Question

我正在使用 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 : {
   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 = ""
      }
     }
 },

Answer 1

我这样解决我的问题

我给了我的无序列表一个 id="taskListul"

在方法中我添加了一个 function：

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

我在 vue 实例的更新方法中调用了这个 function

updated() {
    this.scrollToEndOfTask()
  },