Vue.js-如何在通过<select>标签选择后删除数组元素

阿卜杜里拉·艾萨尼（Abdelillah Aissani）

我想在选择数组时从此数组中删除元素，但v-on：change不是正确的选项，因为当您选择一个项目时，选择值将更改两次，因此该方法也将执行两次（将删除两个元素））我想制定一个新的指令来完成这项工作，但我想把它留作最后的选择...谢谢

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>

这是我的尝试，但是就像我说的那样，它执行两次，因为选择值两次更改，而且我想在项目选择上做更多的事情，所以也许我应该做一个指令

DigitalDrifter

如果您有一个默认值为null的默认选项，则可以通过重新分配this.selected = null然后拼接options数组来工作：

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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。