Показать количество обращений к поисковому запросу - vue - javascript

Question

Я новичок в vue, и я создал таблицу базы данных с возможностью поиска. Теперь, когда я выполняю поиск, я хотел бы знать, сколько хитов он получает при вводе поискового запроса.

Я обнаружил, что количество строк / попаданий должно храниться в totalRows, но когда я печатаю, я просто получаю 1. Похоже, что в нем не хранятся совпадения. В Интернете я могу найти несколько решений, но только при установке некоторых зависимостей. Я хотел бы избежать их. Есть ли другие варианты, чтобы получить количество попаданий? Спасибо.

  <template>
<!-- Header -->
<div class="card pl-3">
    <div class="card-body pb-1">
        <h3 class="card-title">Create </h3>
        <div class="card-body">
            <b-container fluid>
                <!-- User Interface controls -->
                <b-row>
                 <b-col md="5" class="my-1">
                        <b-form-group label-cols-sm="3" label="Filter" class="mb-1">
                            <b-input-group>
                                <b-form-input v-model="itemSearch" placeholder="Search ..."></b-form-input>
                                <b-input-group-append>
                                    <b-button :disabled="!itemSearch" @click="itemSearch = ''">Clear</b-button>
                                </b-input-group-append>
                            </b-input-group>
                        </b-form-group>
                    </b-col>

                    <b-col md="5" class="my-2">
                        <b-form-group label-cols-sm="3" label="Per page" class="mb-0">
                        <b-form-select v-model="perPage" :options="pageOptions"></b-form-select>
                        </b-form-group>
                    </b-col>
                    <b-col md="5" class="my-2">
                        <span v-once>Total number of hits: {{ hits}}</span>
                    </b-col>
                </b-row>
                                    <b-table
                    show-empty
                    stacked="md"
                    :items="items"
                    :fields="fields"
                    :current-page="currentPage"
                    :per-page="perPage"
                    :filter="itemSearch"
                    :sort-by.sync="sortBy"
                    :sort-desc.sync="sortDesc"
                    :sort-direction="sortDirection"
                    @filtered="onFiltered"
                >
                    <template slot="name" slot-scope="row">
                        {{row.item.name}}
                    </template>
                    <template slot="full" slot-scope="row">
                        {{ row.item.category }}{{ row.item.barcode }}
                    </template>
                    <template slot="reaction" slot-scope="row">
                        {{row.item.reaction}}
                    </template>
                    <template slot="spec" slot-scope="row">
                        {{row.item.spec}}
                    </template>
                    <template slot="iso" slot-scope="row">
                        {{row.item.iso}}
                    </template>
                    <template slot="clock" slot-scope="row">
                        {{row.item.clock}}
                    </template>
                    <template slot="theme" slot-scope="row">
                        {{row.item.theme}}
                    </template>
                </b-table>
                <b-row>
                    <b-col md="6" class="my-2">
                        <b-pagination
                        v-model="currentPage"
                        :total-rows="totalRows"
                        :per-page="perPage"
                        class="my-0"
                        ></b-pagination>
                    </b-col>
                </b-row>

            </b-container>
        </div>
    </div>
</div>
</template>
<script>   
export default {
    props: ['itemdata'],
    data() {
        return {
            items: this.itemdata,
            itemSearch: '',
            totalRows: 1,
            currentPage: 1,
            perPage: 10,
            pageOptions: [10, 20, 50,100],
            sortBy: null,
            sortDesc: false,
            sortDirection: 'asc',
            filter: null,
            fields: {
                full: {
                    label: "Id",
                    sortable: true
                },
                name: {
                    label: "item name",
                    sortable: true
                },
                reaction: {
                    label: "reaction",
                    sortable: true
                },
                spec: {
                    label: "spec",
                    sortable: true
                },
                iso: {
                    label: "iso",
                    sortable: true
                },
                clock: {
                    label: "clock",
                    sortable: true
                },
                theme: {
                    label: "theme",
                    sortable: true
                },
                number: {
                    label: "number",
                    sortable: true
                }                    
            }
        } 
    },
    computed:{


        hits: function(){
            var hits = this.items.length
            return hits
        }
    },
    mounted () {
        // Set the initial number of items
        this.totalRows = this.items.length

    },
     methods: {
        onFiltered(filteredItems) {
            // Trigger pagination to update the number of buttons/pages due to filtering
            this.totalRows = filteredItems.length
            this.currentPage = 1
        }
    }
}
</script>

На данный момент я только что получил 404. Общее количество всех моих значений. Оно не меняется при вводе поискового запроса.

Answer 1

Нет необходимости использовать computed для hits. Просто отобразите totalRows, так как это, по сути, количество результатов поиска.

Также не используйте v-once, так как вы пытаетесь визуализировать эту часть DOM более одного раза.

Удалить v-once и показать totalRows:

<span>Total number of hits: {{ totalRows }}</span>

Кстати, это вычисленное свойство hits не будет показывать количество строк, соответствующих поиску. Так как он по сути возвращает this.items.length; но items не изменяется, поэтому оно всегда будет одинаковым.

Answer 2

Я новичок в Vue, поэтому я не уверен в этом.Но я думаю, что директива v-Once запрещает Vue перерисовывать ваш тег.Поэтому, когда ваши хиты обновляются в <span v-once>Total number of hits: {{ hits}}</span>, Vue не перерисовывает ваш тег.Попробуйте тоже удалить директиву v-Once, она должна работать, ... Я думаю;)