Vue Js filters not working

Question

I'm having achieving a data set through axios which I'm trying to display in VueJs, Following is the data set:

{
"model":[
    {
        "id":2,
        "company_id":5,
        "salutation":"Mr",
        "first_name":"Check",
        "last_name":"Contact",
        "number":"234567890",
        "email":"[email protected]",
        "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":"[email protected]",
        "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
        }
    },
]
}

So basically I'm getting this data set and trying to have filter in this, I defined the data set as model: {} in data() and I'm having a method as fetchContactData() which sets the data into model now after getting the response when I console.log(this.model) I get the object set like this:

but for filtering the data set is not getting:

I've my filter functions in computed property

contacts: function() {
    if(this.model)
    {
        return this.model
             .filter(f => (f.company.is_client == 0))
            .map(d => ({label: d.name, value: d.id}))
    }
},

But here this.model is not working I'm getting error of this

Error in render function: "TypeError: this.model.filter is not a function"

When I do console.log(this.model) before if statement, I get this:

If I do console.log(this) I can see the desired value being placed in model[!

If you do console.log(this) instead, is it what you expect? — connexo
– connexo, Commented Jun 3, 2017 at 15:58
@connexo Yes I can see model element having desired value. I've updated the question also with the response. — Nitish Kumar
– Nitish Kumar, Commented Jun 3, 2017 at 16:00

Bert · Accepted Answer · 2017-06-03 16:15:04Z

3

When you initialize the component, you set model to an object.

I defined the data set as model: {} in data()

Objects do not have a filter method. Instead, initialize the model to an empty array.

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

answered Jun 3, 2017 at 16:15

Bert

82.6k17 gold badges205 silver badges166 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

Nitish Kumar Over a year ago

Now I'm getting Error in getter for watcher "filteredOptions": "TypeError: Cannot read property 'toLowerCase' of undefined"

Bert Over a year ago

What's the filteredOptions watcher?

Nitish Kumar Over a year ago

I've nothing in name of filteredOptions no methods, no watcher. I don't know from where it is coming.

Nitish Kumar Over a year ago

Might be I'm using VSelect, from there its coming and I'm placing these filtered options in that.

Nitish Kumar Over a year ago

Can you come to chat?

|

Collectives™ on Stack Overflow

Vue Js filters not working

1 Answer 1

11 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

11 Comments

Your Answer

Sign up or log in

Post as a guest

Related