Xterm.js: Something wrong with multiple dynamic creation of xterm

[boy1583]

I use vue.js to dynamically create xterm .

First , I use a wrap file like this

// Xterm.js
import * as Terminal from 'xterm'
Terminal.loadAddon('attach')
Terminal.loadAddon('fit')
export default Terminal

Second , I wrote a vue component file like this:

// Console.vue
<template>
    <div class="console" :id="'terminal-' + terminal.pid"></div>
</template>
<script>
// import * as Terminal from 'xterm'
import Terminal from './Xterm'
export default {
  name: 'Console',
  props: {
    terminal: {
      type: Object,
      default: {}
    }
  },
  data () {
    return {
      term: null,
      terminalSocket: null
    }
  },
  methods: {
    runRealTerminal () {
      console.log('webSocket is finished')
    },
    errorRealTerminal () {
      console.log('error')
    },
    closeRealTerminal () {
      console.log('close')
    }
  },
  mounted () {
    console.log('pid : ' + this.terminal.pid + ' is on ready')
    let terminalContainer = document.getElementById('terminal-' + this.terminal.pid)
    this.term = new Terminal({
      cursorBlink: true,
      cols: this.terminal.cols,
      rows: this.terminal.rows
    })
    this.term.open(terminalContainer)
    // open websocket
    this.terminalSocket = new WebSocket('ws://127.0.0.1:3000/terminals/' + this.terminal.pid)
    this.terminalSocket.onopen = this.runRealTerminal
    this.terminalSocket.onclose = this.closeRealTerminal
    this.terminalSocket.onerror = this.errorRealTerminal
    this.term.attach(this.terminalSocket)
    this.term._initialized = true
    console.log('mounted is going on')
  },
  beforeDestroy () {
    this.terminalSocket.close()
    this.term.destroy()
  }
}
</script>

Third , I use this component in this way :

// TerminalContainer.vue
<template>
    <div id="terminal-container">
        <div id="console-container">
          <Console v-for="(terminal, index) in terminals" :terminal="terminal" v-show="currentIndex === index"></Console>
        </div>
    </div>
</template>

The terminals data construction like this:

[{
        pid: pid,
        name: 'terminal ' + pid,
        cols: cols,
        rows: rows
},
……
]

Here is the problem , when I add the first one( terminal 2469 ) , the display is good , but when I add the second (terminal 2470) , the view is not good , such as the color :

Then I use vue dev tool to view these two terminal's data , I found the wrong one's (2470) currentRowHeight and lastRecordedViewportHeight is zero , not 15 like another :

How to modify this code ? If there is anything wrong with my code ? Thx !

Details

• Browser and browser version: chrome
• OS version:
• xterm.js version: "xterm": "^2.3.2"

[Tyriar]

I'm not that familiar with vue.js but are you by chance creating xterm and opening it on a container element that is hidden? If so that's you're problem. You will want to either:

• Show the container before calling Terminal.open, or
• Call Terminal.resize with the proper numbers immediately after showing the container.

[boy1583]

Your method solved my problem , Thx !