進入Vuejs后點擊刪除每個芯片

Question

當我點擊芯片時，我想刪除我選擇的單個芯片，這是代碼。 現在我只能刪除已經用逗號分隔的籌碼，而不是單獨刪除。

我不確定如何在循環后刪除oneChip

new Vue({
  el:'div',
  props: {
    set: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      chips:[],
      currentInput: ''
    }
  },
  methods: {
    saveChip() {
      const {chips, currentInput, set} = this;
      ((set && chips.indexOf(currentInput) === -1) || !set) && chips.push(currentInput);
      this.currentInput = '';
    },
    deleteChip(index) {
      this.chips.splice(index, 1);
    },
    backspaceDelete({which}) {
      which == 8 && this.currentInput === '' && this.chips.splice(this.chips.length - 1);
    }
  },
  template: `
    <div class="chip-container">
    <div  v-for="(chip, i) of chips" :key="chip.label">

      <span 

class="chip" v-for="oneChip in chip.split(',')" v-text="oneChip"
@click="deleteChip(oneChip)">
</span>
    </div>
    <input v-model="currentInput" @keypress.enter="saveChip" >
  </div>
  `
}) 

span {
    border: 1px solid red;
  }
.chip-container {
  width: 800px;
  border: 1px solid #ccc;
  min-height: 34px;
  display:flex;
  flex-wrap: wrap;
  align-content: space-between;
  .chip {
    margin:4px;
    background: #e0e0e0;
    padding:0px 4px;
    border: 1px solid #ccc
    border-radius: 3px;
    display:flex;
    align-items: center;
    i {
      cursor: pointer;
      opacity: .56;
      margin-left:8px;
    }
  }
  input {
    flex: 1 1 auto;
    width:30px;
    border: none;
    outline: none;
    padding:4px;
  }
}

Answer 1

這是我對這個問題的解決方案，我在 saveChip 函數中拆分了芯片

 methods: {
        saveChip() {
          const {chips, currentInput, set} = this;
          if ((set && chips.indexOf(currentInput) === -1) || !set) {
            this.chips = this.chips.concat(currentInput.trim(' ').split(','))
          }
          this.currentInput = '';
        },
        deleteChip(chip) {this.chips = this.chips.filter(c => c !== chip)}
      },
      template: `
        <div class="chip-container">
        <div  v-for="(chip, i) of chips" :key="chip.label">
    
          <span 
    
    class="chip" v-for="oneChip in chip.split(',')" v-text="oneChip"
    @click="deleteChip(oneChip)">
    </span>
        </div>
        <input v-model="currentInput" @keypress.enter="saveChip" >
      </div>
      `
    })