Question

仅在scrollTop更新和呈现后才尝试更改元素的messages。有Vue特定的方法吗？

<template lang="pug>
section
  ul#messages(refs="messages")
    Message
  Form(@submit.prevent="send")
</template>

<script>
import Message from './message';
import Form from './form';
export default {
  components: {
    Message,
    Form
  },
  data () {
    return { messages: [] }
  },

  watch: {
    messages: function () {
      // Call a function after `updated` that sets:
      // this.$refs["messages"].scrollTop = this.$refs["messages"].scrollHeight;
    }
  },
  methods: {
    send: function (data) {
      this.messages.push(data);
    }
  }
}

</script>

Answer 1

在updated生命周期挂钩中放置一个条件，该条件检查是否已滚动的布尔值。在消息查看器中更新该布尔值。

<template lang="pug>
section
  ul#messages(refs="messages")
    Message
  Form(@submit.prevent="send")
</template>

<script>
import Message from './message';
import Form from './form';
export default {
  components: {
    Message,
    Form
  },
  data () {
    return { messages: [], scrolled: false }
  },
  updated: function() {
    if(!this.scrolled) {
      // Set scroll height
      this.scrolled = true;
    }
  },
  watch: {
    messages: function(arr) {
      this.scrolled = false;
    },
  },
  methods: {
    send: function (data) {
      this.messages.push(data);
    }
  }
}

</script>

Vue更新后在手表内调用函数

1 个答案: