时间戳

首页 > 解决方案 > props 不能用 v-bind 传递多个数据

vue.js - props 不能用 v-bind 传递多个数据

问题描述

<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.jsvue-component

解决方案

我已经解决了只渲染第一个道具的问题，因为我没有用外部元素包裹所有跨度。用 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>
            '
        })

推荐阅读