如何解决如何使用vue js按行显示数组?
我使用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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。