更新されたV-Htmlは動作しません

Question

私はゲームを作ろうとしています。

プレイヤーがゲームに参加すると、通常、ようこそメッセージが表示されます。しかし、何も現れません。

<template> 
    <div> 
    <span v-html = "welcomeMessage" v-hide></span> 

    <form v-hide v-on:submit.prevent="setPlayer"> 
     <input name="player" placeholder="Enter the player name" v-border:blue/> 
     <button type="submit" v-border:red>Play</button> 
    </form> 
    </div> 
</template> 

<script> 
    export default { 
    name: 'player', 
    data: function() { 
     return { 
     player: '', 
     welcomeMessage: '' 
     } 
    }, 
    updated: function() { 
     this.welcomeMessage = `Hi <span class="player">${this.player}</span> ! ` 
    }, 
    methods: { 
     setPlayer: function (event) { 
     this.player = event.target[0].value 
     } 
    }, 
    directives: { 
     border: function (el, binding) { 
     el.style.borderColor = binding.arg 
     }, 
     hide: function (el, binding, vnode) { 
     let isForm = vnode.tag === 'form' 
     let player = vnode.context.player 
     if (isForm) { 
      el.style.display = player ? 'none' : 'block' 
     } else { 
      el.style.display = player ? 'block' : 'none' 
     } 
     } 
    } 
    } 
</script> 

<style scoped> 
</style> 

それは動作しないようですが、私はなぜわかりません！プレイヤーの名前は更新されたフックで更新されますが、テンプレートには表示されません。

手がかりがあります。

Thxs。

Answer 1

入力をデータにバインドするためにv-modelを使用すると、入力に2つのバインディングが作成されます。これは、コード行の数を減らすことができます。コンポーネントのロジックで

<template> 
<div> 
    // show message only if new player created 
    <span v-html="welcomeMessage" v-show="playerCreated"></span> 
    <form v-on:submit.prevent="setPlayer" v-if="!playerCreated"> 
    <input name="player" v-model="player" placeholder="Enter the player name" v-border:blue/> // bind input to `player` data property. 
    <button type="submit" v-border:red>Play</button> 
    </form> 
</div> 
</template> 

：

data: function() { 
return { 
    player: '', 
    playerCreated: false, 
    welcomeMessage: '' 
    } 
}, 
methods: { 
    setPlayer: function() { 
    this.playerCreated = true; 
    this.welcomeMessage = `Hi <span class="player">${this.player}</span> !` 
    } 
}, 

Answer 2

あなたはこれを使用することができますが、そのがモーダルで私のために働いた、身体にデータをロードする JSFiddle

<template id="some-template"> 
    <div class="header"> 
     <slot name="header"></slot> 
     <slot name="body"></slot> 
     <slot name="footer"></slot> 
    </div> 
</template> 
<div id="app"> 
    <some> 
     <div slot="header" v-html="rawHtmlheader"></div> 
     <div slot="body" v-html="rawHtmlbody"></div> 
     <div slot="footer" v-html="rawHtmlfooter"></div> 
    </some> 
</div> 

JSロジック

Vue.component('some', { 
    template: '#some-template' 
}) 


new Vue({ 
    el: '#app', 
    data: { 
    rawHtmlheader: '<p style="color:red">RED HEADER</p>', 
    rawHtmlbody: '<p style="color:green">GREEN TEXT</p>', 
    rawHtmlfooter: '<p style="color:brown">BROWN FOOTER</p>', 
    } 
})