如何清除Vue.js中点击（x）按钮的select选项？

Question

How do I create a function or button for a clear select option field? I try with

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

but when I clear one field, all fields are cleared. I'm not sure if you need my code with basic select fields? I accept in any way

Answer 1

It can be solved manually using event handlers . Do:

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

And in your methods hook inside script, implement your method:

clearOneField() {
  this.field = null;
}

Answer 2

Let's take this example. You could do it using 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>

fiddle: https://jsfiddle.net/vpqnh9dt/

Answer 3

@option:deselecting="deselecting"

add event deselecting