如何在Vue.js中清除单击到(x)按钮上的选择选项？

brtdzjyr 于 2022-12-14 发布在 Vue.js

关注(0)|答案(3)|浏览(183)

如何创建一个函数或按钮来清除选择选项字段？

<input type="reset" value="x" />

但是当我清除一个字段时，所有字段都被清除。我不确定您是否需要我的基本选择字段代码？我接受

vue.js

来源：https://stackoverflow.com/questions/55462627/how-to-clear-the-select-option-on-click-to-x-button-in-vue-js

3条答案

按热度按时间

qgzx9mmu1#

可以使用event handlers手动求解。

<input value="x" @click="clearOneField" />

并且在你的方法钩子里面编写脚本，实现你的方法：

clearOneField() {
  this.field = null;
}

赞(0）回复(0）举报 2022-12-14

rkue9o1l2#

让我们以这个例子为例。您可以使用v-model来执行此操作：

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <p>{{ message }}</p>
  <select v-model="select">
    <option value="">None</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>
  <button v-on:click="clear">x</button>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    selectvalue: ''
  }
})
</script>

小提琴：https://jsfiddle.net/vpqnh9dt/

赞(0）回复(0）举报 2022-12-14

ss2ws0br3#

@option：取消选择=“取消选择”
添加事件取消选择

赞(0）回复(0）举报 2022-12-14