[Vuejs]-Add comma separated value to separate lines in VUE JS

by

0👍

✅

Yes to another loop with v-for. To make the list item reactive, you need to update the original data and not the computed one. Something like this:

new Vue({
  el: '#app',

  data() {
    return {
      product: {
        refrencing_category_ids: 'bc-men,bc-men-fashion,bc-men-underwear'
      }
    }
  },

  methods: {
    remove(idx) {
      let items = this.product.refrencing_category_ids.split(',');

      let removed = items.splice(idx, 1);

      this.product.refrencing_category_ids = items.join(',');
    }
  },

  computed: {
    refCatIds() {
      return this.product.refrencing_category_ids.split(',');
    }
  }
})
ul {
  list-style: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <ul>
    <li v-for="(id, index) in refCatIds" :key="index">
      <a href="#" @click.prevent="remove(index)">{{id}}</a>
    </li>
  </ul>
</div>

-1👍

Replace all of the commas with \n (newline character)

let string = "bc-men,bc-men-fashion,bc-men-underwear"
console.log(string.replace(/,/g, '\n'))

Leave a comment