

現在
[shogizumen.js](http://maasa.g2.xrea.com/shogizumen/)というスクリプトを使って将棋の局面図を作成しようとしています。

[code]

    <html>
    <body>
      <script src="shogizumen.js"></script>
      <pre class="shogizumen">
      後手の持駒：なし
      ９ ８ ７ ６ ５ ４ ３ ２ １
    +---------------------------+
    |v香v桂 ・ ・ ・v玉v角v桂v香|一
    | ・v飛 ・v銀v金 ・v金 ・ ・|二
    |v歩 ・ ・v歩 ・ ・v銀v歩v歩|三
    | ・v歩v歩 ・v歩v歩v歩 ・ ・|四
    | ・ ・ ・ ・ ・ ・ ・ ・ ・|五
    | ・ ・ 歩 歩 歩 ・ 歩 ・ ・|六
    | 歩 歩 銀 金 ・ 歩 銀 歩 歩|七
    | ・ ・ 金 ・ ・ ・ ・ 飛 ・|八
    | 香 桂 角 玉 ・ ・ ・ 桂 香|九
    +---------------------------+
    先手の持駒：なし
    手数＝25  ▲３七銀  まで
      </pre>
    </body>
    </html>
    
[/code]

このようなHTMLを作成するとブラウザではこのように表示されます

[![実行結果](https://i.stack.imgur.com/dPAAk.png)](https://i.stack.imgur.com/dPAAk.png)

この作業をHTMLに直接書き込むのでは無く、`textarea`に入力したBOD形式の文字列を読み込んで変換したいです。

試しにVueを用いてこのようなコードを作成したのですが上手く行きません

[code]

    <html>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.22/vue.min.js'></script>
    <link rel="stylesheet" href="main.css">
    <body>
    
    <div id="app">
    <textarea v-model="bod" cols="40" rows="20" ></textarea>
    <script src="shogizumen.js"></script>
    
    <pre class="shogizumen">
    {{bod}}
    </pre>
    </div>
    
    
    <script>
      const vueapp = new Vue({
        el: '#app',
        data: {
          bod: '',
          aaa: ''
        }
      })
    </script>
    </body>
    </html>
    
[/code]

これではこのように表示されます

[![実行結果](https://i.stack.imgur.com/XPuVA.png)](https://i.stack.imgur.com/XPuVA.png)

どのようにすれば`textarea`に入力したBOD形式の文字列を上手く変換できるでしょうか？


CC BY-SA 4.0
2020-07-23T15:37:58.967
68869
2020-07-23T16:49:39.027
2020-07-23T15:43:28.523
3060
41225
question
html vue.js
将棋のBOD形式をhtmlに読み込ませる方法について


当該のスクリプトはドキュメントのロード時に存在する`pre.shogizumen`の置換を前提としているようであったのでそのまま動的なものに流用するのは厄介そうでしたが，幸いにも`SSZumen`がグローバルで利用可能な関数と一応なっていたのでそのままでも強引に使うことはできそうです．尤も強制的に再レンダリングを走らせるため厄介なことにはなりましたが……

[code]

    const vueapp = new Vue({
        el: '#app',
        data: {
          bod: '',
          aaa: '',
          show: true,
        },
        watch: {
          bod() {
            this.show=false
            this.$nextTick().then(()=> {
              this.show=true
              return this.$nextTick()
            }).then(()=> {
              window.SSZumen()
            })
    
          }
        }
      })
[/code]

[code]

    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
    <script src="https://pastebin.com/raw/UtB0nSan"></script>
    <div id="app">
    <textarea v-model="bod" cols="40" rows="20"></textarea>
    
    <div v-if="show">
    <pre class="shogizumen">
    {{bod}}
    </pre>
    </div>
    </div>
[/code]


CC BY-SA 4.0
2020-07-23T16:49:39.027
68871
2020-07-23T16:49:39.027
2376
68869
answer