How can I toggle a search bar in Vue using reactive refs like React’s useState?

• Declare a ref called searchBarOpen.
• Then onClick on button arrow function switch boolean state.
• In mustache of name of button, add a tertiary condition depending on searchBarOpen.
• Show input for searching if searchBarOpen is true.

That's all

VUECopied
<template>
  <button
    @click="() => searchBarOpen = !searchBarOpen"
  >
     {{ searchBarOpen ? 'Close search bar' : 'Open search bar' }}
  </button>
  <input v-if="searchBarOpen"/>
<template>

<script setup>
import { ref } from "vue";

const searchBarOpen = ref(false);
</script>

Although I wrote an answer based on the typo in the question, I will specifically answer the question now.

• How to work Vue Reactivity? - StackOverflow

If we have understood Vue reactivity and still want to accomplish something interesting like this, let's continue.

The React useState hook returns two values: the readonly current state and a function to update the reactive stored variable.

JAVASCRIPTCopied
const [state, setState] = useState(initialValue);

In Vue, we can create a function called useState, where we initialize a ref, return it as readonly, and define a setState function to modify the stored ref value.

JAVASCRIPTCopied
import { ref, readonly } from 'vue';

function useState(initialValue) {
  const state = ref(initialValue);

  const setState = (newValue) => {
    if (typeof newValue === "function") {
      state.value = newValue(state.value);
    } else {
      state.value = newValue;
    }
  };

  return [readonly(state), setState];
}

This useState function provides a similar experience in Vue, allowing you to use it in the same way.

JAVASCRIPTCopied
import { useState } from './useState.js';

const [count, setCount] = useState(0);

const increment = () => setCount((prev) => prev + 1);

Live Vue CDN Example

JAVASCRIPTCopied
const { createApp, ref, readonly } = Vue;

// Custom useState function
function useState(initialValue) {
  const state = ref(initialValue);

  const setState = (newValue) => {
    if (typeof newValue === "function") {
      state.value = newValue(state.value);
    } else {
      state.value = newValue;
    }
  };

  return [readonly(state), setState];
}

// Vue app setup
const app = createApp({
  setup() {
    const [openStatus, setOpenStatus] = useState(false);
    const [count, setCount] = useState(0);

    const toggleOpenStatus = () => setOpenStatus((status) => ! status)
    const increment = () => setCount(prev => prev + 1);

    return { openStatus, toggleOpenStatus, count, increment };
  },
  template: `<
    <div><
      <button v-if="! openStatus" @click="toggleOpenStatus">Open</button><
      <div v-else><
        <p>Count: {{ count }}</p><
        <button @click="increment">Increment</button><
        <button @click="toggleOpenStatus">Close</button><
      </div><
    </div><
  `,
});

app.mount("#app");

HTMLCopied
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>

<div id="app"></div>

Run code snippetHide resultsExpand snippet

Here is a React example as well.

Show code snippet

JAVASCRIPTCopied
const { useState } = React;

function App() {
  const [openStatus, setOpenStatus] = useState(false);
  const [count, setCount] = useState(0);

  const toggleOpenStatus = () => setOpenStatus(prevStatus => ! prevStatus);
  const increment = () => setCount(prev => prev + 1);

  return (
    <div>
      {! openStatus ? (
        <button onClick={toggleOpenStatus}>Open</button>
      ) : (
        <div>
          <p>Count: {count}</p>
          <button onClick={increment}>Increment</button>
          <button onClick={toggleOpenStatus}>Close</button>
        </div>
      )}
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);

HTMLCopied
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.3.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.3.1/umd/react-dom.production.min.js"></script>

<div id="root"></div>

Run code snippetHide resultsExpand snippet

React

Live example with React CDN

Show code snippet

JAVASCRIPTCopied
const { useState } = React;

function App() {
  const [searchBarOpen, setSearchBarOpen] = useState(false);

  return (
    <div>
      {!searchBarOpen ? (
        <button onClick={() => setSearchBarOpen(true)}>Open Search Bar</button>
      ) : (
        <div>
          <input />
          <button onClick={() => setSearchBarOpen(false)}>Close</button>
        </div>
      )}
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);

HTMLCopied
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.3.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.3.1/umd/react-dom.production.min.js"></script>

<div id="root"></div>

Run code snippetHide resultsExpand snippet

Vue

In Vue, you can declare reactive objects using the ref() function. You can read or modify their data through the .value property.

• Reactivity: ref() function - Vue 3 Docs
• Reactivity: reactive() function - Vue 3 Docs
• ref() vs reactive() in Vue 3 - StackOverflow
• What is the difference between ref(), toRef() and toRefs()? - StackOverflow

YourComponent.vue (Composition API, Vue 3)

HTMLCopied
<template>
  <div>
    <button v-if="!searchBarOpen" @click="toggleSearchBar">
      Open Search Bar
    </button>
    <div v-else>
      <input />
      <button @click="toggleSearchBar">Close</button>
    </div>
  </div>
</template>


<script setup>
const searchBarOpen = ref(false);

const toggleSearchBar = () => {
  searchBarOpen.value = ! searchBarOpen.value;
};
</script>

Live example with Vue CDN

Show code snippet

JAVASCRIPTCopied
const { createApp, ref } = Vue;

createApp({
  setup() {
    const searchBarOpen = ref(false);

    const toggleSearchBar = () => {
      searchBarOpen.value = ! searchBarOpen.value;
    };

    return { searchBarOpen, toggleSearchBar };
  },
  template: `<
    <div>
      <button v-if="!searchBarOpen" @click="toggleSearchBar">
        Open Search Bar
      </button>
      <div v-else>
        <input />
        <button @click="toggleSearchBar">Close</button>
      </div>
    </div>
  `<
}).mount("#app");

HTMLCopied
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>

<div id="app"></div>

Run code snippetHide resultsExpand snippet

You simply need to set

searchBarOpen.value = true

(or false)

The value property in Vue refs is needed for reactivity internally.

In templates however, your reference to searchBarOpen is correct without value, because the value property will be unwrapped under the hood.