Show rows in dynamic table based on a parameter in Vue.js

Question

I have an ant design table in vue rendered dynamically based on a API data response(:data-source="table_deployenv_data"):

<a-table :data-source="table_deployenv_data" :columns="columnsdeployenvs" bordered>
</a-table>

Columns are defined as following:

columnsdeployenvs: [
        {
          title: "ID",
          dataIndex: "id",
          key: "id",
        },
        {
          title: "Env",
          dataIndex: "env",
          key: "env",
          scopedSlots: {
            filterDropdown: "filterDropdown",
            filterIcon: "filterIcon",
            customRender: "customRender",
          },
          onFilter: (value, record) =>
            record.env.toString()
              .toLowerCase()
              .includes(value.toLowerCase()),
          onFilterDropdownVisibleChange: (visible) => {
            if (visible) {
              setTimeout(() => {
                this.searchInput.focus();
              }, 0);
            }
          },
          sorter: (a, b) => a.modulename.localeCompare(b.moduleame),
          sortDirections: ["descend", "ascend"],
        },
        {
        .......

Now I have an env parameter passed in: {{ $route.params.id}} and I want to ONLY display the table rows when the value of id column equals to {{ $route.params.id}}.

So far I've tried using v-show, style with display: none but none of them is working, does anyone knows an elegant way to do this? I'm really new to front end programming so don't know much about Vue. Thanks!

Answer 1

Make a computed list

computed: {
  table_deployenv_data_filtered: {
    get: function () {
      return this.table_deployenv_data_filtered.filter(p=>p.id==$route.params.id);
    }



  
  }
}


<a-table :data-source="table_deployenv_data_filtered" :columns="columnsdeployenvs" bordered>
    </a-table>

Alternative

in data section add

table_deployenv_data_filtered=[]

in mounted method

this.table_deployenv_data_filtered = this.table_deployenv_data.filter(p=>p.id==this.$route.params.id);