[Vuejs]-On click to remove each chip after enter Vuejs

by

0👍

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

Leave a comment