VueJS computed filter function not working

Question

So I'm trying to implement the functionality explained here Vuejs Search filter but the function inside the computed doesn't seem to work, not even logging anything, here's my code:

...
<a-layout-header style="background: #fff; padding: 0">
    <a-input-search 
      placeholder="Search everything" 
      style="width: 200px; marginLeft: 20px" 
      v-model="searchData"
    />
    <a-button type="primary" style="marginLeft: 20px">
      + New
    </a-button>
</a-layout-header>
...
data() {
  return {
    data: json,
    collapsed: false,
    item_key: 1,
    searchData: ''
  };
},
computed: {
  searchResult() {
    if (this.searchData) {
      return this.data.filter((item) => {
        return this.searchData.toLowerCase().split(' ').every(v => 
                  item.title.toLowerCase().includes(v));
        })
    } else {
      return this.data;
    }
  }
},

Edit: the data that is filtering it's being passed as a prop to a child component, and there I have a ant-design table that gets it:

<a-table
  v-if="this.item.toString() === '1'"
  :columns="columns"
  :row-key="record => record.guid"
  :data-source="normalData"
  :pagination="pagination"
  :row-selection="rowSelection"
>
</a-table>

First, did you omitted your "data" with that "json" statement for brevity? Do you actually call your computed somewhere? — Kapcash
– Kapcash, Commented Jun 30, 2020 at 16:24
No, my data is actually a json which im imported from a file data.json — Sergiu Tonț
– Sergiu Tonț, Commented Jun 30, 2020 at 16:34
And im quite new to Vue, do I need to call computed somewhere in the vue file? — Sergiu Tonț
– Sergiu Tonț, Commented Jun 30, 2020 at 16:35
I'm just wondering how you debugged your computed value. It looks fine from my point of view. Just add {{ searchResult }} somewhere in your template to see what's the value computed! Or you can use the chrome "vuejs devtools" extension to debug your Vuejs app — Kapcash
– Kapcash, Commented Jun 30, 2020 at 16:38
Also, you can try with a dummy "data" object (not from a json file, just create the object yourself in the component) to check if you really have data. — Kapcash
– Kapcash, Commented Jun 30, 2020 at 16:39

IVO GELOV · Accepted Answer · 2020-06-30 16:40:46Z

1

This is how you should implement the search filter:

...
<div>
    <input
      placeholder="Search everything" 
      v-model="searchData"
    >
    <div v-for="(item,index) in filteredList" :key="index">
      {{ item.title }}
    </div>
</div>
...
data() {
  return {
    data: [
  {
    id: 1,
    title: 'First item',
  },
  {
    id: 2,
    title: 'Second item',
  },
  {
    id: 3,
    title: 'Third item',
  },
],
    searchData: ''
  };
},
computed: {
  filteredList() {
    const filter = this.searchData.trim().toUpperCase();
    return filter ? this.data.filter(item =>
    {
      return item.title.toUpperCase().indexOf(filter) !== -1;
    }) : this.data;
  }
},

answered Jun 30, 2020 at 16:40

IVO GELOV

14.3k1 gold badge21 silver badges30 bronze badges

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

2 Comments

Sergiu Tonț Over a year ago

So this is my fault that I didnt specify the whole functionality, the data that I am filtering it's actually passed as a prop to a child component, and there I have an ant-design table which gets this data

IVO GELOV Over a year ago

You can change the template to use the AntDesign table - it will not affect the JavaScript code in any way. Just send the filteredList to the table.

Collectives™ on Stack Overflow

VueJS computed filter function not working

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related