[Vuejs]-Use comma as separator to separate input as chips in Vuejs

by

0👍

✅

It is hard to tell if your raw data contains a space after the comma, (I guess no). If not, this might be the reason. You seperate by ‘, ‘.

Edit:

This code is running for me, as an chips.vue file. I added some style border below to visualize the single span-Elements which are generated.

<template>
  <div class="chip-container">
    <div class="chip" v-for="(chip, i) of chips" :key="chip.label">
      <span v-for="oneChip in chip.split(',')" v-text="oneChip"></span>
      <i class="material-icons" @click="deleteChip(i)">clear</i>
    </div>
    <input v-model="currentInput" @keypress.enter="saveChip" >
  </div>
</template>

<script>
export default {
  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);
    }
  },
}
</script>

<style scoped>
  span {
    border: 1px solid red;
  }
</style>

I filled the input below with:
abc
abc,def,geh

both created a new row (with trailing clear) and abc,def,geh have a red border each.

Leave a comment