Как удалить элемент массива при выделении тегом <select>

Question

Я хочу удалить элементы из этого массива, когда они выделены, но v-on: изменение не является правильным вариантом, потому что при выборе элемента значение выбора будет изменяться дважды, поэтому метод также будет выполняться дважды (два элементабудет удален) я думал о создании новой директивы для этой работы, но я хочу оставить это как мой последний вариант ... спасибо

new Vue({
el:"#app",
data :{
    arr:['1','2','3','4'],
     selected:""
  },
methods :{
splice (){
 this.arr.splice(this.arr.indexOf(this.selected),1)
     }
   }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<select v-model="selected" @change="splice">
<option v-for="item in arr" >{{ item }}</option>
</select>
<div>

это была моя попытка, но, как я уже сказал, она выполняется дважды, потому что значение выбора изменяется дважды, а также я хочу сделать больше вещей при выборе элемента, так что, возможно, ядолжен просто сделать директиву

Answer 1

Вот вариант, использующий простой список для достижения того, что вам нужно, что лучше подходит для вашего случая;

new Vue({
  el: "#app",
  data: {
    arr: ['1','2','3','4'],
    removed: ""
  },
  methods: {
    splice (item, index) {
      this.removed = item
      this.arr.splice(index, 1)
    }
  }
})

ul {
  border: 1px solid black;
  overflow-y: scroll;
  height: 55px;
  width: 50px;
  padding: 0px;
}

li {
  list-style-type: none;
}    

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <ul>
    <li v-for="(item, index) in arr" @click="splice(item, index)">{{ item }}</li>
  </ul>
  Removed: {{ this.removed }}
</div>

Answer 2

Другое решение - использовать свойство watch для просмотра элемента selected и удаления его из массива:

new Vue({
  el: "#app",
  data: {
    arr: ['1', '2', '3', '4'],
    selected: ""
  },
  methods: {

  },
  watch: {
    selected(v) {
      if (this.selected !== "") {
        this.arr.splice(this.arr.indexOf(v), 1)
      }
      this.selected=""
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <select v-model="selected">
    <option v-for="item in arr">{{ item }}</option>
  </select>
  <div>

Answer 3

Если у вас есть опция по умолчанию с нулевым значением для отката, она будет работать, сначала переназначив this.selected = null, а затем скомбинировав массив опций:

new Vue({
  el: "#app",
  data() {
    return {
      arr: ['1', '2', '3', '4'],
      selected: null
    }
  },
  methods: {
    removeElement(e) {
      this.selected = null
      this.arr.splice(this.arr.indexOf(e.target.value), 1)
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <select v-model="selected" @change="removeElement">
    <option :value="null" disabled>-- Select --</option>
    <option v-for="item in arr">{{ item }}</option>
  </select>
</div>