Automatically update the UI with Vue and trigger an event simultaneously

Question

Automatically update the UI with Vue and trigger an event simultaneously

I have a v-for list of items that are derived from a list stored in Vuex. My goal is to ensure that the list automatically scrolls to the bottom each time a new item is added. I managed to implement the scrolling functionality by referring to this helpful resource: Scroll to bottom of div?

The basic idea behind achieving this is as follows:

addItem(){
    dispatch a Vuex event to add an item
    scroll to the bottom of the list
}

However, I encountered an issue where Vue seems to update the v-for list after the scrolling action takes place. As a result, the list always ends up scrolled to the second to last item instead of the very last one.

To address this issue, I temporarily resolved it by incorporating a setTimeout() function to introduce a 10ms delay. While this workaround works, it does feel somewhat hacky. Is there a more elegant and efficient way to trigger the scrollToBottom() function upon updating the v-for list?

javascript vue.js

Answer 1

Answer №1

If you're looking to wait for the next render in a Vue application, the standard method is to utilize

this.$nextTick(() => /* ... */)

. Check out this example:

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

If you're looking to wait for the next render in a Vue application, the standard method is to utilize

this.$nextTick(() => /* ... */)

. Check out this example:

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 3

Answer №2

Implement async / await for dispatch function;

async addNew(){
   ensure asynchronous operation
   scroll to end of content
}

Answer 4

Implement async / await for dispatch function;

async addNew(){
   ensure asynchronous operation
   scroll to end of content
}

Automatically update the UI with Vue and trigger an event simultaneously

Answer №1

Answer №2

Similar questions

Latest versions of Bootstrap are facing issues with the functionality of the Carousel feature

Updating the scope value in AngularJS with an asynchronous response is a crucial task for

Load Materialize autocomplete with data from a JSON file

What is the best way to showcase the proper layout of my article, created using a WYSIWYG editor, with the help of Vue.js and Laravel

What is the best way to ensure a div occupies the full height within a grid layout?

After diligently following every step on OneCheckout and getting no response when placing an order, I decided to upgrade my Magento version from 1.6.1.0 to 1.8

Error: The jQuery function does not recognize the expression: #

What is the best way to perform a deep sumBy operation with lodash?

Updating a React component upon pressing a button to trigger a re-render

What is the best way to navigate through images only when hovering?

Exploring the world of typescript with the power of ts-check

Numerous applications collaborating on workflows within a Firebase project

Set the background of the vue widget to be completely see-through

Calculate the time difference between two dates using Moment JS

The Ajax request was a success, but unfortunately the value in $_POST['value'] is empty

Struggling with obtaining JSON data using Backbone.js

Oops! The Route.get() function in Node.js is throwing an error because it's expecting a callback function, but it received

Executing Auth0 API calls after logging in with Next.JS: A step-by-step guide

Obtain the URL value using jQuery and place it inside a <span> element

Issue with Backbone: Browser button failing to activate routes