Vue.js updated() only when a specific array changes

Question

I am currently working on a chat and want a function that scrolls down to end of the div after data is added to an array.

updated() pretty much works fine but we also have a vue-timepicker in the component which displays a timer so the $nextTick() gets executed every second and you cannot scroll up.

Any ideas how to execute the $nextTick() only when the array with messages changes or any other thoughts?

updated() {
        this.$nextTick(() => this.scrollToBottom());
    },

tony19 · Accepted Answer · 2022-07-15 00:22:25Z

1

You need to watch the exact property that changes

watch: {
  value(val) {
    // executes when value changes
    this.$nextTick(() => this.scrollToBottom());
  },
},

Here you can read more about it https://v2.vuejs.org/v2/api/#watch.

Note that updated is discouraged for this use case:

To react to state changes, it’s usually better to use a computed property or watcher instead.

https://v2.vuejs.org/v2/api/#updated

edited Jul 15, 2022 at 0:22

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Aug 19, 2020 at 11:33

Giorgio Tempesta

2,0911 gold badge28 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

tony19 · Accepted Answer · 2022-07-16 01:24:03Z

1

You could watch that array like :

watch:{
    arrName:{
      handler(newVal,oldVal){
          this.scrollToBottom()
      },
     deep:true

   }

}

edited Jul 16, 2022 at 1:24

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Aug 19, 2020 at 11:30

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

2 Comments

foka135 Over a year ago

Thanks for the answer, the problem with this solution is that it only scrolls down to the penultimate message and not the last.

Boussadjra Brahim Over a year ago

please provide more details in your question and add a code to debug

Collectives™ on Stack Overflow

Vue.js updated() only when a specific array changes

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related