Rookie Question about Vue with input and ref value. Display content of input only after click (not when typing)

Question

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 class="q-pa-md">
            <div class="q-gutter-md" 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 class="text-h6">
  <q-badge  align="middle" style="background-color:#FF4F00;font-size:20px;padding:12px">
  Interactions > </q-badge> {{ gene }} was found XX times.
</div>

Momo · Accepted Answer · 2023-01-06 09:33:05Z

1

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>

answered Jan 6, 2023 at 9:33

Momo

9902 gold badges9 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Rookie Question about Vue with input and ref value. Display content of input only after click (not when typing)

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related