Question

这是一个新手问题，但我无法在网上找到答案/提示：

对于由v-for循环呈现的基本模板：

<div id="app">
    <ul class="list">
        <v-ml_component v-for="data_item in get_data.Value" 
                        v-bind:item="data_item" 
                        v-bind:index="data_index" 
                        v-bind:key="data_item.id" 
                        v-bind:messageType="messageType">
        </v-ml_component>
    </ul>
</div>

<template id="list-template">
    <li>
        <span v-if="messageType.indexOf('inbox') >= 0">{{ item.MessageId }}</span>
        <span>{{index}}</span> : {{ item.Subject }}
    </li>
</template>

在基本示例中，一切都很简单，除了我需要将道具传递给这个组件：

$.getJSON(mockAjaxUrl).done(function(ajaxdata){
    var messageType = 'inbox';
    Vue.component('v-ml_component', {
        template:'#list-template',
        props:['index', 'item', 'messageType']
    });

    var vm = new Vue({
        el:"#app",
        data:{
            messageType: messageType,
            get_data: ajaxdata
        }
    });
});

这会在控制台中出现错误，即messageType未传递给此组件。我想知道如何将此属性的值传递给使用v-for循环呈现的模板？

Answer 1

messageType道具将在HTML中为message-type。

请参阅Vue文档中的camelCase vs. kebab-case。

如何将额外的道具绑定到由v-for呈现的组件？

1 个答案: