Vueify的組件模型爲空

我剛剛開始使用Vue.js，這是我第一次嘗試使用Vueify和Browserify。我做了這個簡單的組件來從Json生成一個表，然而我的組件應該顯示的div是空的，我沒有得到任何錯誤，Vue開發工具擴展顯示了我的Json與所有正確的數據。我可能做一些非常愚蠢的在這裏，但我不能看到它... ...Vueify的組件模型爲空

我的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://[email protected]/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

來源

2017-06-11 HeitorSaldanha

你需要在你start.js文件以註冊Personagens.vue組件。

你可以做到這一點全球：

Vue.component('personagens', Personagens);

或根組件：

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

然後，你還需要實際包含組件的模板標籤：

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

來源

2017-06-11 22:43:00 thanksd

非常感謝！現在由於某種原因，我的v-for不會在我的表中生成行，任何ideia爲什麼？我意識到v-for應該在TR標籤中，但它仍然不起作用。 – HeitorSaldanha

您還需要通過標籤中的'personagens'屬性傳遞數據。我已經更新了答案。你有很多名爲'personagens'的東西，這是令人困惑的。我會將你的變量重新命名爲更加可區分的。此外，這些都是Vue中非常基本的概念，我讀過他們的文檔：https：//vuejs.org/v2/guide/ – thanksd

非常感謝您的答案，我會給文檔更仔細的閱讀。 – HeitorSaldanha

Vueify的組件模型爲空

回答

相關問題