[Vuejs]-V-Html with Updated doesn’t work

by

2👍

✅

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

0👍

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

Leave a comment