javascript - 显示搜索查询的点击次数 - 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

无需使用计算来计算点击。只需显示 totalRows，因为这本质上是搜索结果的数量。

也不要使用v-once，因为您试图多次渲染 DOM 的这一部分。

删除v-once，并显示totalRows:

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

顺便说一句，计算属性hits不会显示与搜索匹配的行数。因为它本质上是返回 this.items.length;但 items 没有被修改，因此它始终是相同的值。