javascript - 获取多个Vue.js数据输出的总长度

Question

TLDR；

我有一个 Vue 下拉组件，用于填充可选项目列表。

               <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>

当选择一个项目时，下拉标签会更新为所选值。

例如我返回了一些可搜索的数据:

data: function(){
 return {
   someData: someDataReturned.things, //only filtering array of things
   search: ''
 }
}

我的数据集的结构是:

{
 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;
            });
        }

值的长度可以不同，我正在尝试获取所有字符的总数并相应地 chop {{name1}} {{name2}} {{name3}}。

当选择一个项目时，我设置当前值来更新标签。

dataClicked: function(item) {
 someData.current.name1 = item.name1;
 someData.current.name2 = item.name2;
 someData.current.name3 = item.name3;
}

此处:---

我想获取标签的总长度并使用过滤器 chop

类似于:

filters: {
    truncate: function(val){ return val.substring(0,30) }
}

然而，我只想根据文本的总长度 chop name1 和 name2。 name1 + name2 + name3 的长度，然后相应地 chop name1 和 name2。

有没有办法在 Vue 中使用过滤器来做到这一点？

Answer 1

一种方法是将整个对象传递给过滤器。

在模板中:

{{ 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 chop 为 4 个字符。您没有提供您要应用的 chop 规则的任何详细信息，因此我没有尝试任何更复杂的事情。