如何使用vue js按行显示数组?

时间:2020-10-09 11:24:57

标签: javascript vue.js bootstrap-table vue-tables-2

我使用laravel在vuejs中获取了选定产品的权重。首先,我的体重以逗号分隔。我将逗号分隔的值转换为数组。当我在模板标签中跨过要输出的权重时,在输出中它排成一行,但是我想显示我的权重按行显示。但产品重量排成一排。

脚本标签


    directives:{
                weights: {
                    bind: function (el, binding, vnode) {
                        //el.innerHTML = binding.value.weights;
                        if( binding.value.weights){
    
                            let weightArr = binding.value.weights.split(',');
                            console.log(weightArr)
                            let weights = weightArr.map((item)=> {
                                if(item < 1 && binding.value.unit.sname == "kg"){
                                    return item*1000 + "gm";
                                } else if(item < 1 && binding.value.unit.sname == "dz"){
                                    return item*12 + "pcs";
                                } else {
                                    return item +  binding.value.unit.sname;
                                }
                            });
                            el.innerHTML = weights;
                        } else {
                            el.innerHTML = ""
                        }
                    }
                }
            },
        mounted()
        {
            this.getWeights();
        },
    
        methods: 
        {
            getWeights(){
                 axios.get('getweight/'+this.productWeightIdUpdate)
                        .then(({ data }) => {
                            this.items = data.items
                        })
            },

模板标签


    template>
        <div class="row">
            <div class="col-6">
                 <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">{{title}}</h3>
                        <div class="card-tools">
                            <b-button variant="primary" @click="onSubmit">Update</b-button>
                        </div>
                    </div>
                    <div class="card-body table-responsive p-0">
                        <b-table ref="selectableTable" selectable :select-mode="'multi'" :items="items" :fields="fields" bordered hover :head-variant="'light'" @row-selected="onRowSelected" responsive="sm">
                           
                            <template v-slot:cell(weights)="data">
                                <span v-weights="data.item"></span>
                            </template>
                        </b-table>
                    </div>
                </div>
            </div>
        </div>
    </template>

0 个答案:

没有答案