Javascript 获取多个Vue.js数据输出的总长度
TLDR强> 我有一个Vue下拉组件,用于填充可选项的列表Javascript 获取多个Vue.js数据输出的总长度,javascript,jquery,vue.js,vuejs2,Javascript,Jquery,Vue.js,Vuejs2,TLDR 我有一个Vue下拉组件,用于填充可选项的列表 <dropdown-component inline-template> <div> <!--Drop Label--><span v-on:click='showDropDown=!showDropDown' :class="{'active-menu': showDropDown, '': !showDro
<dropdown-component inline-template>
<div>
<!--Drop Label--><span v-on:click='showDropDown=!showDropDown' :class="{'active-menu': showDropDown, '': !showDropDown">{{someData.current.name1}} ({{someData.current.name2}}) {{someData.current.name3}}</span>
<!-- Drop Menu List --><div v-if='showDropDown' v-cloak v-model="showDropDown">
<div>
<input type="text" v-model="search" name="search" placeholder="Search" autocomplete="off">
</div>
<!-- Data populated list --><div v-for='data in searchFilter'>
<span v-on:click='dataClicked(data)'>{{data.name1}} {{data.name2}} {{data.name3}}</span>
</div>
</div>
</div>
</dropdown-component>
我的数据集的结构是:
{
things: [{name1: value1, name2: value2},{name1: value1, name2: value2}],
current: {name1: value1, name2: value2, name3: value3}
}
然后有了这个数据集,我就有了一个用于搜索的计算过滤器
computed: {
searchFilter: function() {
var _this = this;
return this.someData.filter(function(obj){
return obj.name1.toString().indexOf(_this.search.toLowerCase()) >= 0;
});
}
这些值可以是不同的长度,我试图获得所有字符的总计数,并相应地截断{{name1}{{name2}{{name3}
当选择一个项目时,我将当前值设置为更新标签
dataClicked: function(item) {
someData.current.name1 = item.name1;
someData.current.name2 = item.name2;
someData.current.name3 = item.name3;
}
此处:---
我想得到标签的总长度,并使用过滤器进行截断
比如:
filters: {
truncate: function(val){ return val.substring(0,30) }
}
然而,我只想根据文本的总长度来截断name1
和name2
。name1+name2+name3的长度,然后相应地截断name1和name2
在Vue中,是否有方法使用过滤器来执行此操作?一种方法是将整个对象传递给过滤器
在模板中:
{{ someData.current | truncate }}
然后在过滤器中
:
truncate (current) {
var name1 = current.name1,
name2 = current.name2,
name3 = current.name3,
totalLength = name1.length + name2.length + name3.length;
if (totalLength > 30) {
// Inset appropriate truncation here
name1 = name1.slice(0, 4);
name2 = name2.slice(0, 4);
}
return name1 + ' ' + name2 + ' ' + name3;
}
如本文所述,它将把name1
和name2
截断为4个字符。您还没有给出要应用的截断规则的任何详细信息,因此我没有尝试任何更复杂的操作。^^^这一点。这是一个很好的简化例子。非常感谢。我希望我正确地表达了这个问题,以便在类似情况下帮助其他人。
truncate (current) {
var name1 = current.name1,
name2 = current.name2,
name3 = current.name3,
totalLength = name1.length + name2.length + name3.length;
if (totalLength > 30) {
// Inset appropriate truncation here
name1 = name1.slice(0, 4);
name2 = name2.slice(0, 4);
}
return name1 + ' ' + name2 + ' ' + name3;
}