Vue Js过滤器无法正常工作

时间:2017-06-03 15:53:50

标签: javascript vue.js vuejs2

我通过axios实现了数据集,我试图在VueJs中显示,以下是数据集:

{
"model":[
    {
        "id":2,
        "company_id":5,
        "salutation":"Mr",
        "first_name":"Check",
        "last_name":"Contact",
        "number":"234567890",
        "email":"check@contact.com",
        "alt_email":null,
        "address":"Thane",
        "city":"Thane",
        "state":"Maharastra",
        "country":"India",
        "profile":"Research-Corporate Access",
        "sectors_interested":"[\"Infrastructure\",\"Financial Services\",\"Capital Goods\",\"Pharmaceuticals\",\"Real Estate\"]",
        "companies_interested":"[{\"value\":7,\"label\":\"Test Company 4\"}]",
        "created_at":"2017-06-02 19:32:30",
        "updated_at":"2017-06-02 19:32:30",
        "deleted_at":null,
        "company":{
            "id":5,
            "name":"Test Company 3",
            "address":"Andheri",
            "city":"Mumbai",
            "state":null,
            "country":"India",
            "type":"Research-Tier II",
            "is_client":0,
            "created_at":"2017-06-02 14:48:20",
            "updated_at":"2017-06-02 14:48:20",
            "deleted_at":null
        }
    },
    {
        "id":3,
        "company_id":4,
        "salutation":"Mr",
        "first_name":"Check 1",
        "last_name":"Contact",
        "number":null,
        "email":"check1@contact.com",
        "alt_email":null,
        "address":null,
        "city":null,
        "state":null,
        "country":null,
        "profile":"Investor-Research Head",
        "sectors_interested":"[\"Economics\",\"Real Estate\",\"Auto\",\"Consumer\",\"Logistics\",\"Oil & Gas\",\"Industrial\",\"Capital Goods\"]",
        "companies_interested":"[{\"value\":7,\"label\":\"Test Company 4\"},{\"value\":8,\"label\":\"Test Company 5\"}]",
        "created_at":"2017-06-03 06:28:03",
        "updated_at":"2017-06-03 06:28:03",
        "deleted_at":null,
        "company":{
            "id":4,
            "name":"Test Company 2",
            "address":"Chennai",
            "city":"Chennai",
            "state":null,
            "country":"India",
            "type":"Investor-Mutual Fund",
            "is_client":0,
            "created_at":"2017-06-02 06:42:16",
            "updated_at":"2017-06-02 15:32:17",
            "deleted_at":null
        }
    },
]
}

所以我基本上得到了这个数据集,并试图对此进行过滤,我在model: {}中将数据集定义为data(),我的方法为{ {1}}我在获得响应后{I} fetchContactData()将数据设置为model我得到的对象设置如下:

enter image description here

但是为了过滤数据集没有得到:

我在console.log(this.model)属性

中使用了我的过滤器功能
computed

但是这里这个。模型不起作用我收到了这个

的错误
  

渲染函数出错:" TypeError:this.model.filter不是函数"

当我在if语句之前contacts: function() { if(this.model) { return this.model .filter(f => (f.company.is_client == 0)) .map(d => ({label: d.name, value: d.id})) } }, 时,我得到了这个:

enter image description here

如果我console.log(this.model)我可以看到所需的值放在模型中[!

enter image description here

1 个答案:

答案 0 :(得分:3)

初始化组件时,将模型设置为对象。

  

我在data()

中将数据集定义为model:{}

对象没有filter方法。而是将model初始化为空数组。

data(){
    return {
        model: []
    }
}