我使用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>