Vue.js 重用过滤器

Question

我制作了这两个过滤器：

过滤器 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, '.$1'); // 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;
        });
    });