Question

<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，但只显示货币。看起来只有传递到组件的第一个道具会被渲染。该如何解决？

Answer 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>
            '
        })

道具无法通过v-bind传递多个数据

1 个答案: