V-Html mit Aktualisiert funktioniert nicht

Question

Ich versuche ein Spiel zu machen.

Wenn ein Spieler sich dem Spiel anschließt, erscheint normalerweise die Willkommensnachricht! Aber nichts erscheint.

<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> 

es scheint, dass das nicht funktioniert, ich weiß nicht warum! Der Name des Players wird im Hook aktualisiert, aber die Vorlage zeigt ihn nicht an.

Irgendwelche Hinweise.

Thxs.

Answer 1

Verwenden Sie v-model, um Eingaben an Daten zu binden. Dadurch werden zwei bindende Eingaben erzeugt. Dies kann ein paar Codezeilen reduzieren.

<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> 

In der Komponentenlogik:

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

Answer 2

Sie können dies nutzen, seine für mich in modal gearbeitet, wenn Daten an Körper Laden 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 Logik

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>', 
    } 
})