V-Html with Updated doesn’t work

Question

I m trying to make a game.

When a player submit to the game, normally the welcome message appears ! But Nothing appears.

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

it seems that doesn't work, i don't know why ! the name of theplayer is updated in the hook updated but the template doesn't show it.

Any clue.

Thxs.

Answer 1

Use v-model to bind input to data, this create a two binding on inputs. This can reduce a couple to code lines.

<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 the component logic:

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

Answer 2

You can use this, its worked for me in modal, when loading data to body 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 logic

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