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

【问题标题】：how do a do a scroll in to view for a newly added list item in vueJS如何在 vueJS 中滚动查看新添加的列表项
【发布时间】：2021-05-26 22:52:48
【问题描述】：

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

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

我这样解决我的问题

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

在方法中我添加了一个函数：

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

我在vue实例的update方法中调用了这个函数

updated() {
    this.scrollToEndOfTask()
  },

【讨论】：