Question

我想在选择数组时从此数组中删除元素，但v-on：change不是正确的选项，因为当您选择一个项目时，选择值将更改两次，因此该方法也将执行两次（两个元素将被删除）我想制定一个新的指令来完成这项工作，但是我想把它留作最后的选择...谢谢新Vue（{ el：“＃app”，数据：{ arr：['1'，'2'，'3'，'4']，已选择：“” }，方法：{ 拼接（）{ this.arr.splice（this.arr.indexOf（this.selected），1） } } }）

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

3 个答案:

答案 0 :(得分：2)

答案 1 :(得分：2)

答案 2 :(得分：1)

Answer 1

这里有一个选项，它使用简单的列表来满足您的需求，这似乎更适合您的情况；

<!DOCTYPE html>
<html>
<head>
<style>
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}
</style>
</head>
<body>
<table class="table">
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>

<button onclick="myPrintFunction()">Click me</button>

<script>
  function myPrintFunction() {
    let divToPrint = document.getElementsByClassName("table")[0];
    if (typeof divToPrint !== 'undefined') {
      let newWin = window.open();
      newWin.document.write('<h1>PRINT FRIENDLY</h1>');
      newWin.document.write(divToPrint.outerHTML);
      newWin.document.close();
      newWin.focus();
      setTimeout(()=>{
        newWin.print();
        newWin.close();
      }, 1000);
    } else {
      alert('NO EVENTS TO PRINT!');
    }
  }
</script>

</body>
</html>

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;
}

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

如果您有一个默认值为null的默认选项，则可以通过重新分配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>

如何通过<select>标签选择后删除数组元素

3 个答案: