Question

我已经研究过该网站和Google，但似乎无法给出答案。

我要呈现单个组件具有的组件列表的模板。

问题点在父组件模板的内部：

    <Attribute
            v-for="attribute in attributes"
            v-bind:key="attribute.name"
            :name="attribute.name"
            :value="attribute.value"
            :defaultValue="attribute.defaultValue"
            :bonusAtDefault="attribute.bonusAtDefault"
            :valueToBonusIncrementRatio="attribute.valueToBonusIncrementRatio"
    >
    </Attribute>

在渲染所有属性项的对象表示法之前，它工作正常：

    <div v-for="(attribute, index) in attributes" :key="`attribute-${index}`">
        {{attribute}}
    </div>

我得到的错误似乎表明，在尝试实例化属性组件时，属性中所有项目的值均未定义。

该组件的总代码如下：

    <template>
    <div v-if="attributes.length == 0" id="attributesContainer">
        <p>No attributes are here!</p>
        <button id="attributesModalOpenBtn">Add Attribute</button>
        <div id="attributesModal" class="modal">
            <div id="attributesModalContent" class="modal-content">
                <span id="attributeModalClose" class="modal-close">&times;</span>
                <label>Name:</label>
                <input type="text" id="newAttributeName" v-model="modalName"/>
                <label>Value:</label>
                <input type="text" id="newAttributeValue" v-model="modalValue"/>
                <label>Default Value:</label>
                <input type="text" id="newAttributeDefaultValue" v-model="modalDefaultValue"/>
                <label>Bonus At Default:</label>
                <input type="text" id="newAttributeBonusAtDefault" v-model="modalBonusAtDefault"/>
                <label>Value-to-bonus Increment Ratio:</label>
                <input type="text" id="newAttributeRatio" v-model="modalRatio"/>
                <button v-on:click="addAttribute()">
                    Create Attribute
                </button>
            </div>             
        </div>
    </div>
    <div v-else id="attributesContainer">
        <button id="attributesModalOpenBtn">Add Attribute</button>
        <div id="attributesModal" class="modal">
            <div id="attributesModalContent" class="modal-content">
                <span id="attributeModalClose" class="modal-close">&times;</span>
                <label>Name:</label>
                <input type="text" id="newAttributeName" v-model="modalName"/>
                <label>Value:</label>
                <input type="number" id="newAttributeValue" v-model="modalValue"/>
                <label>Default Value:</label>
                <input type="number" id="newAttributeDefaultValue" v-model="modalDefaultValue"/>
                <label>Bonus At Default:</label>
                <input type="number" id="newAttributeBonusAtDefault" v-model="modalBonusAtDefault"/>
                <label>Value-to-bonus Increment Ratio:</label>
                <input type="number" id="newAttributeRatio" v-model="modalRatio"/>
                <button v-on:click="addAttribute()" class="modal-close">
                    Create Attribute
                </button>
            </div>             
        </div>
        <div v-for="(attribute, index) in attributes" :key="`attribute-${index}`">
            {{attribute}}
        </div>
        <Attribute
            v-for="attribute in attributes"
            v-bind:key="attribute.name"
            :name="attribute.name"
            :value="attribute.value"
            :defaultValue="attribute.defaultValue"
            :bonusAtDefault="attribute.bonusAtDefault"
            :valueToBonusIncrementRatio="attribute.valueToBonusIncrementRatio"
        >
        </Attribute>
    </div>    
</template>

<script>
    import Attribute from './Attribute.vue'

    export default {
        data() {
            return {
                modalName:'',
                modalValue:10,
                modalDefaultValue:10,
                modalBonusAtDefault:0,
                modalRatio:2,
                attributes: [],
            }
        },
        components: {
            Attribute
        },
        methods: {
            addAttribute () {
                this.attributes.push(
                    {'Attribute':{
                        'name': this.modalName,
                        'value': this.modalValue,
                        'defaultValue': this.modalDefaultValue,
                        'bonusAtDefault': this.modalBonusAtDefault,
                        'valueToBonusIncrementRatio': this.modalRatio
                    }}
                )
            },
        }
    };
</script>

<style scoped>
@import 'modal.css';
</style>

此外，模态以及所有实例化和呈现属性的工作都很好，只需将整个文件放在此处作为上下文即可。

如何呈现嵌套Vue组件列表的模板？

0 个答案: