javascript - glyphicon 能够使用@click

Question

情况是这样的，当我在输入文本上键入某些内容时，glyphicon-remove 将显示，然后当我单击它时，它应该会重置搜索。

这是我的代码

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

我的问题是，当我单击glyphicon-remove时，它什么也不做

Answer 1

这是工作示例

new Vue({
  el: "#app",
  data:{
    search:""
  }
});

<!-- Latest compiled and minified 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>