进入Vuejs后点击删除每个芯片

Question

I would like to remove single chip of my choice when I click on the chip, here is the code. Right now I can only delete chips that already separated by comma together not individually.

I'm not sure how to remove oneChip after the loop

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

Here is my solution for the issue, I have split chips within saveChip function

 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>
      `
    })