在输入字段搜索vuejs上单击按钮（X）时如何执行功能答案

【问题标题】：How to execute a function when Click Button (X) on Input Field search vuejs在输入字段搜索vuejs上单击按钮（X）时如何执行功能
【发布时间】：2021-04-10 18:59:19
【问题描述】：

当使用 Vue 点击搜索中的 Click Button (X) 时，我需要执行一个操作。

当他点击输入搜索时？关于“x

new Vue({
  el: "#app",
  
  data: {
    msg: 'the input is cleaned',
    info:''
  },
  
 
  methods: {
    handleClick: function(){
    // to do sonthing when is cleaned not before
        if(this.info=='')
      alert(this.msg)
    },
    
   
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <input type="search" v-model="info" @click="handleClick" >
  <br>
  <span>{{ info }}</span>
</div>

【问题讨论】：

嗨！我不明白这部分问题I need to do an action when Click Button (X) on search is clicked using Vue，请您换一种说法吗？当用户清除输入时，当他按下键 X（大写 x）或者只是当他点击输入时，你想要运行一些东西吗？
当他点击输入搜索时？在“x”上

标签： vue.js components vue-component

【解决方案1】：

您似乎想要区分input[type="search"] 内的正常点击和对其清除控件的点击。我花了一些时间尝试比较这两次点击，但我无法发现它们有何不同。

但我想出了一个办法来解决这个问题：

如果输入有值（您需要一个值才能显示清除按钮）
我们等待 DOM 更新，在它更新之后，如果输入不再有值（它已被清除）=> 宾果！这是一次清晰的搜索点击。

因此：

Vue.config.devtools = false;
Vue.config.productionTip = false;

new Vue({
  el: '#app',
  methods: {
    handleClick(e) {
      if (e.target.value) {
        this.$nextTick() // wait for DOM update
          .then(() => {
            if (e.target.value === '') {
              console.log('clear button clicked you must have, young Jedi!');
            }
          })
      }
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <input type="search" @click="handleClick">
</div>

不过，我相信你最好在v-model 上戴上手表：

watch: {
  info(newVal, oldVal) {
    if (oldVal && !newVal) {
      console.log('info was cleared').
    }
  }
}

Vue.config.devtools = false;
Vue.config.productionTip = false;

new Vue({
  el: '#app',
  data: () => ({ info: '' }),
  watch: {
    info(newVal, oldVal) {
      if (oldVal && !newVal) {
        console.log('morning has broken...');
      }
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <input type="search" v-model="info">
</div>

它的优点是它不仅会在click 上触发。每次info 从真值变为假值时都会触发，无论是什么导致了更改（即：用户选择文本并按 Delete 或 Backspace ; 任何其他清除它的组件方法，重置输入或父表单等...）。

【讨论】：

【解决方案2】：

从对问题的评论中，您要求在用户单击输入字段时调用函数？我是这样理解你的问题的。

对于这种情况，这里有一个关于如何实现的快速演示。
https://codesandbox.io/s/dry-lake-34bvi?file=/src/App.vue

【讨论】：