Question

我有一个v-for项目列表，这些列表基于Vuex中存储的列表。我想要它，以便每次添加新项目时列表自动滚动到底部。我使用以下方法找出了滚动部分：Scroll to bottom of div?

伪代码如下：

addItem(){
    dispatch vuex event to add item
    scroll to bottom of list
}

我遇到的问题是Vue似乎正在更新v-for列表之后，列表滚动到底部，这意味着列表总是滚动到倒数第二个项，而不是最后一项。

我通过使用setTimout()等待10毫秒来修复它，但是感觉有些不客气。是否有更好的方法来触发v-for列表更新中的scrollToBottom()代码？

Answer 1

等待下一个渲染的正常方法是使用this.$nextTick(() => /* ... */)。这是一个演示：

new Vue({
  el: '#app',
  'store': new Vuex.Store({
    state: {
      items: ["a", "b", "c", "d"],
      index: 100
    },
    mutations: {
      itemAdded(state) {
        state.items.push(String.fromCharCode(++state.index));
      }
    },
    actions: {
      addItem({ commit }) {
        commit('itemAdded');
      }
    }
  }),
  computed: {
    ...Vuex.mapState(['items'])
  },
  mounted() { this.scrollToBottom(); },
  methods: {
    addItem() {
      this.$store.dispatch('addItem');
      this.$nextTick(() => this.scrollToBottom()); // <-------------------------
    },
    scrollToBottom() {
      this.$refs.list.scrollTop = this.$refs.list.scrollHeight;
    }
  }
});

ul { border: 1px solid black; height: 4em; overflow-y: scroll; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.21/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/3.5.1/vuex.min.js"></script>

<div id="app">
  <div>
    <button @click="addItem">Add item</button>
    <ul ref="list">
      <li v-for="(label, i) in items" :key="i">{{label}}</li>
    </ul>
  </div>
</div>

Answer 2

您需要异步/等待分派；

async addItem(){
   await dispatch()
   scroll to bottom of list
}

Vue：自动更新UI时触发事件

2 个答案: