Le modèle de composant de Vueify est vide

Question

Je viens de commencer avec Vue.js, et c'est la première fois que j'essaie d'utiliser Vueify et Browserify. J'ai fait ce simple composant pour générer une table à partir d'un Json, cependant la div où mon composant devrait apparaître est vide, je ne reçois aucune erreur et l'extension Vue dev tools montre mon Json avec toutes les données correctes. Je suis probablement faire ici quelque chose de très stupide, mais je ne peux pas le voir ...

Mon index.html:

<div class="content"> 
     <div id="vuePersonagens"></div> 
     <script src="<?php echo get_stylesheet_directory_uri(); ?>/js/components/Personagens/build.js"></script> 
</div> 

Personagens.vue:

<template> 
<div> 
    <h1>Personagens</h1> 
    <table v-for="personagem in personagens" class="table table-striped table-hover"> 
    <thead> 
     <th>Nome</th> 
     <th>Raça</th> 
     <th>Classe</th> 
     <th>Level Efetivo</th> 
    </thead> 
    <tbody> 
     <tr> 
      <td>{{ personagem.nome }}</td> 
      <td>{{ personagem.raca }}</td> 
      <td>{{ personagem.classe }}</td> 
      <td>{{ personagem.level }}</td> 
     </tr> 
    </tbody> 
    </table> 
</div> 
</template> 

<script lang="ts"> 
    import * as Vue from 'vue' 
    import Component from 'vue-class-component' 

    @Component({ 
     props: { 
     personagens: [{ "nome": String, "raca": String, "classe": String, level: Number}] 
     } 
    }) 
    export default class Personagens extends Vue { 
     personagens: [{ "nome": String, "raca": String, "classe": String, level: Number}] 
    } 
</script> 

start.js :

var Vue = require('vue') 
var Personagens = require('./Personagens.vue') 

new Vue({ 
    el: '#vuePersonagens', 
    data: { 
    personagens: [{ "nome": "Banjo", "raca": "Lizarkin", "classe": "Bard/Cleric", level: 8}] 
    } 
}) 

package.json:

{ 
    "name": "cleave", 
    "version": "1.0.0", 
    "description": "JSON", 
    "main": "index.js", 
    "scripts": { 
    "test": "echo \"Error: no test specified\" && exit 1" 
    }, 
    "repository": { 
    "type": "git", 
    "url": "git+https://hsaldanha@bitbucket.org/hsaldanha/cleave.git" 
    }, 
    "author": "Heitor Saldanha", 
    "license": "ISC", 
    "homepage": "https://bitbucket.org/hsaldanha/cleave#readme", 
    "dependencies": { 
    "@types/es6-promise": "0.0.32", 
    "vue": "^2.3.4", 
    "vue-class-component": "^5.0.1" 
    }, 
    "devDependencies": { 
    "vueify": "^9.4.1" 
    }, 
    "browser": { 
    "vue": "vue/dist/vue.common.js" 
    } 
} 

Console showing empty DIV

Vue devtools shows my Json

Answer 1

Vous devez enregistrer le composant Personagens.vue dans votre fichier start.js.

Vous pouvez le faire à l'échelle mondiale:

Vue.component('personagens', Personagens); 

Ou dans le composant racine:

new Vue({ 
    el: '#vuePersonagens', 
    components: { personagens: Personagens }, 
    data: { 
    ... 
    } 
}) 

Ensuite, vous devez également inclure effectivement l'étiquette du composant dans le modèle:

<div id="vuePersonagens"> 
    <personagens :personagens="personagens"></personagens> 
</div>