the ability to utilize the @click glyphicon signal

In this scenario, as soon as I type something into the input field, the glyphicon-remove icon will appear. Upon clicking on it, the intention is for it to reset the search input.

Below is the code snippet:

<div class="form-group has-feedback has-feedback-left">
   <input type="text" class="form-control" v-on:input="fetchProducts()" v-model="search" style="margin-top:15px;" placeholder="Search">
   <i class="glyphicon glyphicon-remove form-control-feedback" v-if="search" @click="search=''"></i>
</div>

The issue I'm facing is that when I click on the glyphicon-remove icon, nothing happens.

javascriptvue.jsvuejs2

Answer №1

Check out this operational demonstration.

new Vue({
  el: "#app",
  data:{
    search:""
  }
});
<!-- Utilize the most recent compiled and condensed CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app">
<div class="form-group has-feedback has-feedback-left">
   <input type="text" class="" v-model="search" style="margin-top:15px;" placeholder="Search">
   <span v-show="search" class="glyphicon glyphicon-remove" aria-hidden="true" @click="search=''"></span>
</div>
Searching : {{search}}
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Show the list in a circular buffer fashion

I am working on a project that involves creating a unique UI element. In Frame #2 of my professionally designed diagram, I envision a list that functions as a ring buffer/rolodex when it exceeds four items. The list would scroll in a loop with the top and ...

javascripthtmlcss

Tips for posting a data-uri image on Pinterest

I'm attempting to post a data-uri image on Pinterest. Here is the code I am using: <a target="_blank" href="https://www.pinterest.com/pin/create/button/"> <img class="pin-image" src="data:image/png;base64,…"> </a> Following th ...

javascripthtmlapisharepinterest

Combining CSV data from multiple arrays into a single object array

After finding inspiration in this thread on storing CSV files in separate arrays, I successfully implemented it. Now, I am hoping to expand my setup by incorporating 8 additional arrays, each containing the contents of CSV files. My main challenge now is ...

javascriptarrayscsvd3.js

Is there a way to streamline a function that substitutes certain words?

Looking for ways to simplify my function that shortens words when the label wraps due to different screen resolutions. It seems like it could be more efficient to use arrays for long and short word pairs, but I'm not sure how to implement it. Check ou ...

javascriptjqueryarraysfunctiontruncate

Using Nested ng-repeat for Values and Keys in Angular

Struggling with implementing nested ng-repeats in my code. I have a JSON object with multiple layers and attempting to iterate through them to display the data. Here is the structure of the JSON: { "status": "success", "data": { "Mat": { "tota ...

javascriptjsonangularjs

Tips for transferring the value of ng-model to multiple controllers

Is it possible to access the value of an ng-model from two different controllers? While I am aware that using a service is one way to share data between controllers, I am struggling to figure out how to pass the value of an ng-model to a service for this ...

javascriptangularjs

Exploring the application of Nested Maps in extracting parameters for the getStaticPaths

Your data structure is organized like this: data = { "cse": { "first": [ "Computer Hardware Essentials", "Computer System Essentials", "Cultural Education" ], "second&qu ...

javascriptarraysreactjsnestednext.js

Issues encountered when trying to implement helperText in mui date picker

Can someone assist with this issue? The helper text is not displaying as expected in the following code snippet: <div className={classes.container}> <LocalizationProvider dateAdapter={AdapterDateFns}> <Des ...

javascriptreactjsmaterial-uifrontend

Is there a way to swap out a div with another using ajax and php?

i am looking to update the content from readmore.php into <div id='box'> based on id_pages in index.php after clicking <a class=readmore> Read More </a>. i have been trying to figure out how to retrieve data from readmore.p ...

javascriptphpajax

What could be causing the promises in Promise.all to remain in a pending state?

After restructuring my code to correctly utilize promises, I encountered a challenge with ensuring that the lastStep function can access both the HTML and URL of each page. To overcome this issue, I'm attempting to return an object in nextStep(). Alt ...

javascriptnode.jsweb-scrapingpromise

Sending an array from one page to another with Vue

I'm facing the challenge of passing an array from one page to another. When accessing the next page on form submission using this.$router.push('path'), is there a way for me to also transfer the array so that it can be accessed on the new p ...

javascriptvue.jsnuxt.js

Guide to executing a fetch request prior to another fetch in React Native

I am currently working on a project using React Native. One issue I have run into is that all fetch requests are being executed simultaneously. What I actually need is for one fetch to wait until the previous one has completed before using its data. Speci ...

javascriptreact-nativeasync-awaitpromise

Working on rectifying the Chat Engine API code that was causing a 403 Status Code to be generated

Encountering a status code 403 while attempting to create a chat engine IO page, even though all authentication headers are believed to be accurate. Double-checked for typos but still unable to identify the issue. Despite console logging the user correctly ...

javascriptreactjsreact-chat-engine

Remove the active class from a list item using History.js

My goal is to add the active class to a link when clicked in my AJAX app, triggering statechange on History.js. I'm struggling with saving the current active link(s) with the state so that the active class is appropriately added or removed when naviga ...

javascripthistory.js

The webpage is failing to refresh even after using history.push()

While working on my React dictionary project, I encountered an issue with React Router. After using history.push() with the useHistory hook from react-router, the page does not re-render as expected. I have a search bar and utilize this function to navigat ...

javascriptreactjsreact-router

Can a variable containing HTML code be iterated through with a loop?

I am currently working on setting up a select button that will receive options from an ajax call. The ajax call is functioning properly. However, I am facing a challenge when trying to create a variable containing the HTML. I am unsure of how to iterate a ...

javascripthtmlajax

What are the steps to create a mirror image of an object within itself?

Can an object reflect itself? I am interested in seeing a self-reflection on a metallic object. In essence, the two rings of the mechanism should be reflected in the lower part. Thank you in advance! https://i.sstatic.net/m3KUY.jpg https://i.sstatic.n ...

javascriptthree.js

Function was expected to call toggleStyle spy, but it did not

Currently, I am implementing Jasmine testing for my project. Below is the function that I am working with: style: string; toggleStyle(style: string, version: string) { this.style = `mapbox://styles/mapbox/${style}-${version}`; } Accompanied by th ...

javascriptangularkarma-jasmineistanbul

Using Grails to create remote functions with multiple parameters

Currently, I am able to send one parameter to the controller using the code snippet below in Javascript: <g:javascript> var sel = "test"; <g:remoteFunction action="newExisting" method="GET" update="updateThis" params="'sel='+s ...

javascriptgrails

Create a dynamic table using d3.js that incorporates JSON data with interconnected information and hyperlinks

I am currently facing a coding challenge without any specific example to refer to. I have a JSON data retrieved from the server side and need to display it as a table on the client side. While using d3.js for this task seems feasible, the complication aris ...

javascriptjqueryjsond3.js