0

我想在 VueJS 中使用本地组件：

我的组件文件（清理了一下）：

<template id="heroValuePair">
    <td class="inner label">{{label}}</td>
    <td class="inner value">{{c}}</td>
    <td class="inner value">
        {{t}}
        <span v-if="c < t" class="more">(+{{t-c}})</span>
        <span v-if="c > t" class="less">({{t-c}})</span>
    </td>
</template>


<template id="hero">

    <table class="hero card" border="0" cellpadding="0" cellspacing="0">
        <tr>
           <td>other data...</td>
       </tr>
        <tr>
            <hvp label="Label" v-bind:c="current.level" :t="target.level" :key="hero.id"/>
        </tr>
    </table>
</template>

<script>
  var HeroValuePair = {
        template: "#heroValuePair",
        props: {
            label : String,
            c : Number,
            t : Number
        },
        created() {
            console.log("HVP: "+this.c+" "+this.t);
        }
    };


    Vue.component("Hero", {
        template: "#hero",
        props: {
            heroId : String
        },
        components: {
            "hvp" : HeroValuePair
        },
        data: () => ({
            hero: {},
            current: {},
            target: {}
        }),
        computed: {

        },
        created() {
            fetch("/api/hero/"+this.heroId)
                .then(res => res.json())
                .then(res => {
                    this.hero = res.hero
                    this.current = res.current
                    this.target = res.target
                 })
        }
    });

</script>
<style>
</style>

这个外部 Hero 模板用于列表迭代器：

<template id="card-list">
    <table>
        Card list
       <div id="">
           <div v-for="card in cards" class="entry">
               <Hero :hero-id="card.hero.id" :key="card.hero.id"/>
           </div>
       </div>

    </table>

</template>
<script>
    Vue.component("card-list", {
        template: "#card-list",
        data: () => ({
            cards: [],
        }),
        created() {
            fetch("/api/cards")
                .then(res => res.json())
                .then(res => {
                    this.cards = res.heroes
                 })
                .catch((e) => alert("Error while fetching cards: "+e));
        }
    });

</script>
<style>
</style>

但是，当我渲染卡片列表时，它只生成模板中第一个td的列表：hvp

在此处输入图像描述

当我注释掉hpv页面调用时，使用 Hero 模板中的所有 HTML 代码正确呈现。

我试图弄清楚我遗漏了哪一步，但找不到线索。最后一条信息：我使用 JavalinVue 来支持服务器端，而不是基于 nodejs 的 Vue CLI。我不知道它是否有任何影响，但可能很重要。

更新 1

在 IVO GELOV 发现多个根标签的问题后，由于我无法迁移到 Vue3，我尝试按照他的建议将其作为功能模板。我删除了模板并创建了render函数：


  var HeroValuePair =  {
        template: "#heroValuePair",
        functional: true,
        props: {
            label : String,
            c : Number,
            t : Number
        },
        render(createElement, context) {
            console.log("HVP: "+context.props.c+" "+context.props.t);
            if (typeof context.props.c === undefined) return createElement("td"  )
            else return [
                createElement("td", context.props.label  ),
                createElement("td", context.props.c  ),
                createElement("td", context.props.t  )
            ]
        }
    }

虽然控制台显示渲染被正确调用，但结果是一样的：既没有渲染节点，也没有显示父 Hero 组件。我试图移动到不同的文件中，尝试了功能模板格式，但都没有奏效。

4

0 回答 0