I am currently using the script shogizumen.js to create a situation diagram for shogi.
<html>
<body>
<script src="shogizumen.js"></script>
<preclass="shogizumen">
The piece in the back hand: None
9 8 7 6 5 4 3 2 1
+---------------------------+
|v incense v Katsura · ·v balls v horns v Katsura v incense | 1
| ·V Flying ·V Silver ·V Gold ·V Gold ·|2
|v-step ·v-step ·v-silver v-step |3
| ·V-step ·V-step ·V-step ·V-step ·|4
| · · · · · · · | 5
| ·Steps ·Steps ·Steps ·|6
| Step by step, step by step, step by step, step by step, step by step | 7
| ············|8
| Katsura Kakutama · · Katsura Katsura | 9
+---------------------------+
First-handed piece: None
Up to = 25 ▲ 37 silver
</pre>
</body>
</html>
If you create HTML like this, your browser will see it like this
Instead of writing this task directly to HTML, I would like to read and convert the BOD format string entered in textarea
.
I tried using Vue to create a code like this, but it didn't work.
<html>
<script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.22/vue.min.js'></script>
<link rel="stylesheet" href="main.css">
<body>
<divid="app">
<textarea v-model="bod" cols="40" rows="20">/textarea>
<script src="shogizumen.js"></script>
<preclass="shogizumen">
{{bod}}
</pre>
</div>
<script>
const vueapp = new Vue({
el: '#app',
data: {
bod:',
aaa: '
}
})
</script>
</body>
</html>
This is what it looks like
How can I successfully convert the BOD format string I entered in textarea
?
The script seemed to assume the replacement of pre.shogizumen
that existed when loading the document, so it seemed troublesome to divert it to a dynamic one, but fortunately SSZumen
became a global function, so I could force it to re-render...
const vueapp=newVue({
el: '#app',
data: {
bod:',
aaa:',
show —true,
},
watch: {
US>bod(){
This.show=false
This.$nextTick().then()=>{
This.show=true
return this.$nextTick()
}).then(()=>{
window.SSZumen()
})
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://pastebin.com/raw/UtB0nSan"></script>
<divid="app">
<textarea v-model="bod" cols="40" rows="20">/textarea>
<div v-if = "show" >
<preclass="shogizumen">
{{bod}}
</pre>
</div>
</div>
© 2024 OneMinuteCode. All rights reserved.