帶有更新的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>

似乎不起作用，我不知道為什么！ 在更新的掛鈎中更新了玩家的名稱，但模板未顯示它。

任何線索。

謝謝

Answer 1

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

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