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

by

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>
👤Momo

Leave a comment