props 不能用 v-bind 传递多个数据答案

【问题标题】：Props can't pass multiple data with v-bindprops 不能用 v-bind 传递多个数据
【发布时间】：2019-07-14 18:45:03
【问题描述】：

<div id="expense-page>    
  <div class="balance" v-for="item in Object.keys(balance)">
    <span class="balance-item">${ item }</span>
    <span class="currency-sign">${ currency }</span>
    <span class="balance-value">${ balance[item] }</span>
  </div>
</div>

我尝试将上面的工作代码作为 Vue 组件移动，如下所示：

    // in html
    <balance-detail 
            v-for="item in Object.keys(balance)"
            v-bind:item="item"
            v-bind:currency="currency"
            v-bind:balance="balance" />

    <script>
    let balance = {{ balance | safe }} // from Django views
    let vm = new Vue({
                delimiters: ['${', '}'],
                el: '#expense-page',
                data: {
                    currency: balance[0].fields.currency,
                    balance: _.omit(balance[0].fields, ['user', 'currency']),
                },
                components: {
                    BalanceDetail,
                }
            })
    </script>

    // BalanceDetail.vue
    var BalanceDetail = Vue.component('balance-detail', {
        props: {
            item: String,
            currency: String,
            balance: Object,
        },
        template: '\
            <span class="balance-item">{{ item }}</span>\
            <span class="currency-sign">{{ currency }}</span>\
             <span class="balance-value">{{ balance[item] }}</span>\
        '
    })

但只有第一个跨度显示（即平衡字段的键）。我试图删除组件实例上的 v-for 和 v-bind:item，但我只看到了货币。看起来只有传递给组件的第一个道具会被渲染。如何解决这个问题？

【问题讨论】：

标签： vue.js vue-component

【解决方案1】：

我已经解决了只渲染第一个道具的问题，因为我没有用外部元素包裹所有跨度。用 div 包裹解决问题。

    // BalanceDetail.vue
        var BalanceDetail = Vue.component('balance-detail', {
            props: {
                item: String,
                currency: String,
                balance: Object,
            },
            template: '\
            <div>
                <span class="balance-item">{{ item }}</span>\
                <span class="currency-sign">{{ currency }}</span>\
                 <span class="balance-value">{{ balance[item] }}</span>\
            </div>
            '
        })

【讨论】：