Saya mencoba membuat game.

Ketika seorang pemain tunduk pada permainan, biasanya pesan selamat datang muncul! Tapi Tidak ada yang muncul.

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

Sepertinya itu tidak berhasil, saya tidak tahu mengapa! nama pemain diperbarui di hook diperbarui tetapi template tidak menunjukkannya.

Petunjuk apa pun.

Terima kasih.

0
Kikou 13 Maret 2017, 16:12

2 jawaban

Jawaban Terbaik

Gunakan v-model untuk mengikat input ke data, ini membuat dua pengikatan pada input. Ini dapat mengurangi beberapa menjadi baris kode.

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

Dalam logika komponen:

data: function () {
 return {
   player: '',
   playerCreated: false,
   welcomeMessage: ''
  }
 },
 methods: {
  setPlayer: function () {
   this.playerCreated = true;
   this.welcomeMessage = `Hi <span class="player">${this.player}</span> !`
  }
},
2
Srinivas Damam 13 Maret 2017, 14:49

Anda dapat menggunakan ini, ini berfungsi untuk saya di modal, saat memuat data ke badan 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>

Logika 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>',
  }
})
0
Petr Filippov 12 November 2017, 17:57