[Vuejs]-Is it possible to make v-for variables dynamic in vue?

by

0👍

It’s a bit difficult to understand exactly what you’re trying to do but it looks like you’re trying to get a specific list in the v-for loop.

One way to fix your issue would be to nest your lists inside of an object in your data like this:

  data() {
    return {
      listNumber: 3,
      lists: {
        list1: [
          { name: "John", id: 1 },
          { name: "Joao", id: 2 },
          { name: "Jean", id: 3 },
          { name: "Gerard", id: 4 }
        ],
        list2: [
          { name: "Juan", id: 5 },
          { name: "Edgard", id: 6 },
          { name: "Johnson", id: 7 }
        ],
      },
    };

And then in your code you can just do lists[`list${n}`] like this:

<div class="col-3" v-for="n in listNumber"  :key="n">
  <h3>Table {{n}}</h3>
  <draggable class="list-group" :list="lists[`list${n}`]" group="people" @change="log">
    <div
      class="list-group-item"
      v-for="(element, index) in lists[`list${n}`]"
      :key="element.name"
    >
      {{ element.name }} {{ index }}
</div>

There is a lot more refactoring and other cleanup you could (and should) probably do but this should at least get you over this hurdle.

Leave a comment