显示搜索查询的命中数-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>目前，我刚得到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指令，它应该起作用，...我认为;）