Vueifyのコンポーネントモデルは空です

Question

私はVue.jsで始まったばかりですが、VueifyとBrowserifyを使うのは初めてです。 私はこの単純なコンポーネントを使ってJsonからテーブルを生成しましたが、コンポーネントが表示されるdivは空ですが、エラーは発生せず、Vue開発ツールの拡張機能はJsonにすべての正しいデータを表示します。

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

私のindex.htmlを私はおそらくここに非常に間抜けな何かをやっているが、私はそれを見ることができません：

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

あなたstart.jsファイルにPersonagens.vueコンポーネントを登録する必要があります。

あなたは世界的にこれを行うことができ、次のいずれか

Vue.component('personagens', Personagens); 

またはルートコンポーネントで

：

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

：次に

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

は、あなたも実際にテンプレート内のコンポーネントのタグを含める必要が