Show different components depending on immediate modifications and complete or incomplete data entry in Vue.js

Question

Show different components depending on immediate modifications and complete or incomplete data entry in Vue.js

I am trying to create a simple form with a search bar and two buttons. The goal is for the fill button to be visible only when there is text in the input, and for the empty button to show when the input is empty. I want the buttons to dynamically display or hide based on the content of the input field, updating instantly with any changes. How can this functionality be achieved using Vue.js?

The desired behavior is for the fill button to appear when the input has text. When clicked, it should clear the input, hiding itself and revealing the empty button. The fill button's purpose is to reset the input when it contains text.

<form class="myform">

  <button type="reset" class="fill">Show when fill </button>
  
  <button class="empty">Show when empty</button>

  <input type="search" class="myinput">

</form>

javascript vue.js vuejs2

Answer 1

Answer №1

If you're looking for some code assistance, the snippet below may be of help.

   <template>
      <div id="app">
       <form class="myform">
    
          <button @click.prevent="reset" v-if="search" type="reset" class="fill">Display when content is filled
          </button>
          
          <button v-else  class="empty">Show when field is empty</button>
    
          <input v-model="search" type="search" class="myinput">
    
        </form>
      </div>
    </template>
   <script>
    export default {
      name: "App",
      data() {
        return {
          search: null,
        }
      },
      methods: {
        reset() {
          this.search = null;
        }
      }

    };
    </script>

Answer 2

If you're looking for some code assistance, the snippet below may be of help.

   <template>
      <div id="app">
       <form class="myform">
    
          <button @click.prevent="reset" v-if="search" type="reset" class="fill">Display when content is filled
          </button>
          
          <button v-else  class="empty">Show when field is empty</button>
    
          <input v-model="search" type="search" class="myinput">
    
        </form>
      </div>
    </template>
   <script>
    export default {
      name: "App",
      data() {
        return {
          search: null,
        }
      },
      methods: {
        reset() {
          this.search = null;
        }
      }

    };
    </script>

Show different components depending on immediate modifications and complete or incomplete data entry in Vue.js

Answer №1

Similar questions

Passing a state object in a POST request body, only to find it arriving empty at the Express server

Make sure that the click event listener is set up on the anchor element so that it also affects its children

Unable to call a basic object's prototype method

What sets v-model apart from .sync when implemented on a custom component?

Using d3.js to toggle visibility of bars when clicking on the legend

When implementing Firebase Cloud Messaging with React, the token generated by firebase.messaging().getToken() will vary with every refresh

Tips for disabling scrolling on a <div> using another <div> as a lock

What is the best way to place a 3D model at random points on the surface of a sphere while ensuring that it always faces the right direction?

Issue with handling click events on action column in Datatable using jQuery

When passing the value of "undefined" into a function, keep in mind that the function must be declared in a separate JavaScript file. This

KnockoutJS is not recognizing containerless if binding functionality

Question inquired regarding a specific line of code in Javascript/Angular

Is it possible to display multiple qTips for the same target using jQuery qTip2?

The JavaScript function is designed to only accept whole numbers as input

Vue Progressive Web App pre-caching routes for improved performance

What is the reason for function expressions being hoisted when called within Express JS middleware?

Automatically appending textarea value in HTML tag upon form submission via JQuery

Ways to extract the ASP.net variable value and place it inside a JavaScript textbox

Determining Marker Location Post Drag in Laravel-VUE Component

Verifying the username's availability through AJAX requests