Question

I have an electron app that runs a program and captures stdout when data arrives.

I'm trying to display the contents of this output in an html pre element.

I can create a variable, and keep appending the output data as I receive it to accomplish this.

I'm wondering if there's a better way to do this with VueJS? Instead of building a string and having Vue render the variable like:

<pre>
   {{ outputBuffer }}
</pre>

Would there be a way to just directly append the data as I receive it. So, ideally, outputBuffer would contain the new data coming in and I could append it to the pre element, like using .innerHTML in a computed property maybe.

Answer 1

此接缝就像v-text和v-for指令的良好用例。使outputBuffer成为您附加内容的数组。并做这样的事情。如果您不需要，请务必从参数中删除键和索引。

<pre>
  <template 
    class="scriptview-block-property"
    v-for="(value, key, index) in outputBuffer"
    v-text="value"
  />
</pre>

v-text适用于不是多个字符串组合的文本。它可以防止不需要的换行符等内容，也可以转义输入的变量，因此输出中的</div>不会破坏您的应用。 https://vuejs.org/v2/api/#v-text

v-for遍历该数组，并为每个元素提供渲染。 https://vuejs.org/v2/api/#v-for

VueJS将数据附加到<pre>

1 个答案: