auの日記

プログラミング初心者の日記。(auはハンドルネームです)

Splitpanesでパネルを動的に追加する方法

auです。

あれからSplitpanesを触っていて、ボタンを押した際にパネルを追加する動作を実装できたのでメモしておきます。

と言っても、公式に答えは書いてあるので日本語版的な認識にしてください。

antoniandre.github.io

やり方

やり方は、v-forを使って動的に追加・削除します。

<splitpanes
    style="height: 100vh;"
    class="default-theme"
    horizontal
>

  <pane :size="100">
      <splitpanes>
        <pane id="meetingRoom" v-for="i in underPaneNumber" :key="i">
          {{ i }}
        </pane>
      </splitpanes>
  </pane>

</splitpanes>

<script>
export default {
    data () {
        underPaneNumber: 1
    },
    methods: {
        onItemClick () {
            this.underPaneNumber += 1
        }
    }
}
</script>

所々端折っていますが、ボタンなどを置いてもらって、「onItemClick」を呼び出してもらえばパネルの数が変化します。

v-forの値が変化すると、DOMが再度レンダリングされるようなので、好きな数に変化させることができます。

完成するとこんな感じ

f:id:program-shoshinsya:20200531212436p:plain

f:id:program-shoshinsya:20200531212509p:plain