How to filter table rows in vuejs?

Question

Vue.js

When you select a table row, you need to hide the rest of the rows, while pressing the button in the row again - you need to return it as it was.

<template>
        <div class="container-fluid" id="searchResult">
            <div class="row">
                <div class="col s12">
                    <div class="card-panel grey lighten-5 z-depth-1">
                        <table class="highlight">
                            <tbody>
                                <tr v-for="(val, key, index) in objSearch">
                                    <td>{{ val.name }}</td>
                                    <td>{{ val.lastname }}</td>
                                    <td>
                                        <a class="waves-effect waves-light btn>Выбрать</a>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
</template>

<script>
    export default {
        data() {
            return {
                objSearch: {
                    0: {
                        name: 'Сергей',
                        lastname: 'Иванович',
                    },
                    1: {
                        name: 'Андрей',
                        lastname: 'Петрович',
                    }
                },
            }
        }
    }
</script>

Answer 1

Let's add a property to the component that will represent the selected row:

data: () => ({
  selected: null,
  ...
}),

Display the selected row, if any; or all: Click on the button - reset the selected property, if it is set; otherwise, install: https://jsfiddle.net/dg4bxhu2/ Or, if "need to hide" is taken literally, then you can define a class that will hide the lines:
<tr v-for="(n, i) in (selected || objSearch)">
@click="selected = selected ? null : { [i]: n }"

.hidden {
  visibility: hidden;
}

Assign it to a row if there is a selected row and it is not the current one:

<tr
  v-for="(n, i) in objSearch"
  :class="{ hidden: selected !== null && selected !== i }"
>

Accordingly, setting the selected value:
@click="selected = selected === null ? i : null"
https://jsfiddle.net/dg4bxhu2/1/

Answer 2

<tr v-for="(val, key, index) in objSearch | filterBy current">
    <td>{{ val.name }}</td>
    <td>{{ val.lastname }}</td>
    <td><a class="waves-effect waves-light btn" @click="Choose(val)">Выбрать</a></td>
</tr>

{
        data: function(){
             render: {
                 current: '',
             }
        }
        ...        
        methods: {
            Choose: function(val){
                this.current = val;
            }
        }
        ...
    }

Didn't check, may not work, but you most likely need to reconsider the json structure. Write id next to name, lastname. Then you could do this:

<tr v-for="(val, key, index) in objSearch | filterBy current in 'id'">
    <td>{{ val.name }}</td>
    <td>{{ val.lastname }}</td>
    <td><a class="waves-effect waves-light btn" @click="Choose(val)">Выбрать</a></td>
</tr>