how to toggle the search bar with search button?

[kaizoku2508]

I was try to make the search bar appear and disappear whenever I click the search button. This mean the button is toggle the search field. But I cannot make the search bar disappear after I click search button.

<template>
  <q-input
    :hidden="showSearch"
    v-model="search"
    dark
    label-color="white"
    type="search"
    class="bg-primary"
    color="white" />
  <q-btn
    flat rounded
    icon="search"
    color="white"
    @click="toggleSearch"/>

</template>

<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({

  setup () {
    const showSearch = ref(false)
    const search = ref('')
    const toggleSearch = () => {
      console.log('toggle search', showSearch.value)
      showSearch.value = !showSearch.value
    }

    return {
      search,
      showSearch,
      toggleSearch
    }
  }
})
</script>

[metalsadman]

@kaizoku2508 said in how to toggle the search bar with search button?:

showSearch

use v-if <q-input v-if="showSearch"....

[kaizoku2508]

This post is deleted!

[kaizoku2508]

@metalsadman i tried v-if nothing happen but when I change to v-show, it can toggle as I wanted. is it correct to use v-show. Anyway thanks for that idea

[dobbel]

@kaizoku2508

is it correct to use v-show

https://stackoverflow.com/questions/42419192/what-is-better-in-vue-js-2-use-v-if-or-v-show