restUI/frontend/vue-web/src/components/Output.vue

<template>
	<div class="output">
		<pre><code v-html="msg"></code> </pre>	
	</div>
</template>

<script>
import Vue from "vue"
import editor from "vue2-ace"
import { EventBus } from "../common/eventbus"

export default {
	mounted() {
		EventBus.$on("log", this.dolog) // place this elsewhere?
	},
	data: () => {
		return {
			counter: 0,
			msg: ""
		}
	},
	methods: {
		dolog (...msg) {
			var doscroll = false
			var tolerance = 10
			var innerHeight = parseInt(getComputedStyle(this.$el).getPropertyValue("height"))
			if (this.$el.scrollTop + innerHeight >= this.$el.scrollHeight - tolerance) {
				doscroll = true
			}

			this.msg += "[" + this.counter + "] " + msg.join(" ") + "\n"
			this.counter++

			if (doscroll) {
				Vue.nextTick(() => { // This should be in the next tick
					this.$el.scrollTop = this.$el.scrollHeight
				})
			}
		}
	},
	components: {editor}
}
</script>