已更新的V-Html無法正常工作

-1

當玩家提交的遊戲，通常出現在歡迎留言！但沒有出現。

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

來源

2017-03-13 Kikou

爲什麼重新使用一些自定義的'v-hide'而不是簡單的內置'v-if =「welcomeMessage」'或'v-show =「welcomeMessage」'？ – ceejayoz

@ceejayoz我正在關注教程，當我提交名稱播放器時，welcomeMessage不顯示 – Kikou

選擇其他教程。你使用的是低劣的。 – ceejayoz

使用v-模型綁定輸入數據，這創建上輸入的兩個結合位。這可以減少一對夫婦的代碼行。

<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> !` 
    } 
},

來源

2017-03-13 13:38:22

但是當玩家加入時，表單仍然存在！ – Kikou

它的工作原理，檢查工作小提琴https://jsfiddle.net/0gjp3z8L/ @Kikou –

是它的工作原理，消息「你好球員，但是當玩家的歡迎消息appaers – Kikou

您可以使用此，其模式爲我工作，將數據加載到身體的時候 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>', 
    } 
})

來源

2017-11-12 17:49:05

已更新的V-Html無法正常工作

回答

相關問題