I have an input and a click button. When I click I request a database (async/await) and finally display a table with requested data. At the same time I display the input keyword like "{{input}} was found X times".

But then I want to do another research but the text of input is reactive and change while I'am typing. I would like to only display the new keyword input after the click.

I'm struggling to do that.

 <div >
            <div  style="max-width:600px">
            <q-input outlined bottom-slots v-model="gene" label="Gene Symbol :"  >

            <template v-slot:before>
              <q-icon name="search" />
            </template>

            <template v-slot:hint>
              Ligand or Receptor
            </template>

            <template v-slot:after>
              <q-btn @click="search" label="Search :"   />
            </template>
            </q-input>
        </div>

Elsewhere I have this for the display:

<div >
  <q-badge  align="middle" style="background-color:#FF4F00;font-size:20px;padding:12px">
  Interactions > </q-badge> {{ gene }} was found XX times.
</div>

CodePudding user response：

When you use v-model, the value changes with any input change. To avoid it you can define a new variable to store the gene value whenever q-btn is clicked; Like this:

<template>
    <input v-model="gene" type="text">
    <button @click="search">search</button>
    <div v-if="searchedFor">
        {{ searchedFor }} was found X times
    </div>
</template>

<script>
export default {
    data() {
        return {
            gene: "",
            searchedFor: ""
        }
    },
    methods: {
        search() {
            // Clear the previous one
            this.searchedFor = ""
            // API fetch ...
            this.searchedFor = this.gene
        }
    }
}
</script>