Vue.js 重用过滤器

Question

我制作了这 2 个过滤器：

过滤器 1

  Vue.filter('role',function(value,role)
        {
            if(!role || 0 === role.length)
            {
                return value;
            }
            return value.filter(function(item) {
                return item.role.RoleName == role
            });
        });

过滤器 2

    Vue.filter('company',function(value,company)
        {
            if(!company || 0 === company.length)
            {
                return value;
            }
            return value.filter(function(item) {
                return item.department.company.CompanyName == role
            });
        });

现在我想把它们结合起来。像这样：

组合过滤器

  Vue.filter('employeefilter',function(value,employeeinfo,filteron)
        {
            if(!employeeinfo || 0 === employeeinfo.length)
            {
                return value;
            }
            return value.filter(function(item) {
                return item.filteron == employeeinfo
            });
        });

然后我将其传递给组合过滤器：

v-for="employee in list | employeefilter selectedrole 'role.RoleName'

但这不起作用我该如何解决 ^

编辑

我现在是这样通过的：

v-for="employee in list | employeefilter selectedrole 'item.role.RoleName'| employeefilter selectedcompany item.department.company.CompanyId"

错误：

Uncaught TypeError: Cannot read property 'replace' of undefined

Answer 1

相关：Using variable keys to access values in JavaScript objects

来自那个答案：

您可以通过点表示法或括号表示法访问对象属性。

var x = {'test': 'hi'};
alert(x.test); // alerts hi
alert(x['test']); // alerts hi

当你有一个动态值时，你必须使用后者：

var property = 'test';
alert(x.property); // looks for x.property, undefined if it doesn't exist
alert(x[property]); // looks for x['test'], alerts hi

所以你需要做：

return value.filter(function(item) {
    return item[filteron] == employeeinfo
});

编辑，实际上这行不通，因为您还需要解析 filteron 字符串（item['role.RoleName'] 行不通，item['role']['RoleName'] 是您想要的。查看此答案一个函数，允许您使用字符串访问对象的深度属性：Accessing nested JavaScript objects with string key

最终代码：

Object.byString = function(o, s) {
    s = s.replace(/\[(\w+)\]/g, '.'); // convert indexes to properties
    s = s.replace(/^\./, '');           // strip a leading dot
    var a = s.split('.');
    for (var i = 0, n = a.length; i < n; ++i) {
        var k = a[i];
        if (k in o) {
            o = o[k];
        } else {
            return;
        }
    }
    return o;
}

Vue.filter('employeefilter',function(value,employeeinfo,filteron)
    {
        if(!employeeinfo || 0 === employeeinfo.length)
        {
            return value;
        }
        return value.filter(function(item) {
            return Object.byString(value, filteron) == employeeinfo;
        });
    });

Vue.js 重用过滤器

Vue.js reuse filter

javascript

filter

vue.js