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指令，它应该起作用，...我想;）

显示搜索查询的命中数-Vue-JavaScript

2 个答案: