0

I'm building a Vue.js app that will be run on devices where I don't have access to a dev tools console, such as a game console. I've created a vue DebugPanel component that contains several tabs, one of them being a "log" to write to.

The UI is mostly working as I expect, but now I need to actually take what's in the console and have it output to the element in the component.

I'd like to use this solution of hijacking the consol.log function. This solution works great in a non-vue HTML page, but I'm having trouble with the best way to incorporate it into a Vue.js app.

The issue I'm having is that each tab section on my DebugPanel is hidden/shown based on a v-if attribute. The log element is only in the DOM when its tab element shown. So a call to document.getElementById errors.

Any thoughts on how to implement this in Vue.js?

Scott
  • 1,011
  • 1
  • 15
  • 30

1 Answers1

0

You can just use Vuex store to pass data through all the app. And i think it would be better to use it in your app for global data.

Asimple
  • 650
  • 3
  • 8
  • Can you elaborate on how you would do this for my scenario? Do you mean, have a `store.state.log` that I'm appending strings on to and then bind that to my log element? These would be strings of HTML and if the app is running for a while, could get rather large. I would be concerned about performance. – Scott May 14 '20 at 20:44
  • store.state.log, as you said, but you can dont need to keep html there. You can keep logs as array and do something like this:
    {{ log.text }}
    – Asimple May 15 '20 at 10:47
  • This will allow you to keep logs, control their length and add a highlight for them, based on log.class – Asimple May 15 '20 at 10:50