Как отфильтровать строки таблицы во vuejs?

Question

[andre7777]

При выборе строки таблицы необходимо скрыть остальные строки, при этом нажав еще раз на кнопку в строке - нужно вернуть как было.

<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

[0xD34F]

Добавим в компонент свойство, которое будет представлять выбранную строку:

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

Отображаем выбранную строку, если она есть; или все:

<tr v-for="(n, i) in (selected || objSearch)">

Клик по кнопке - сбрасываем свойство selected, если оно установлено; в противном случае устанавливаем:

@click="selected = selected ? null : { [i]: n }"

https://jsfiddle.net/dg4bxhu2/

Или, если "необходимо скрыть" понимать буквально, то можно определить класс, который будет прятать строки:

.hidden {
  visibility: hidden;
}

Назначать его строке, если есть выбранная строка и она не является текущей:

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

Соответственно, установка значения selected:

@click="selected = selected === null ? i : null"

https://jsfiddle.net/dg4bxhu2/1/

Answer 2

[Yeldos Adetbekov]

<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;
            }
        }
        ...
    }

Не проверял, может не работает, но вам скорее всего нужно пересмотреть структуру json. Пишите id рядом с name, lastname. Тогда можно было сделать так:

<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>

Comments

[Yeldos Adetbekov]

Это для 2.0- vue. Для 2.0+ https://lodash.com/docs/4.17.4#filter