dynamic interpolation computed method name in v-for element in vuejs

Question

In my project vuejs a create a list element with ul li and v-for directive vuejs like this:

<ul>
    <li :class="{active: 'isActive+index'}" v-for="(car, index) in cars"></li>
</ul>

Those elements are dynamics. Sometimes are 2 sometimes are 3 or 4 elements

But I need to have a specific logic active class css for each like this:

'isActive+index'

Where this represent a dynamic computed name (already exist). But obviously this code not run and generate basic string word not a link to computed method. I want to execute those computed methods:

computed:
{
    isActive1: function ()
    {
        return myLogic
    },
    isActive2: function ()
    {
        return myLogic
    },
    isActive3: function ()
    {
        return myLogic
    },
    isActive4: function ()
    {
        return myLogic
    },
}

How can I link element with dynamic method name for execute computed with vuejs ?

Can you give the example of cars data and what's inside the myLogic? maybe there's a better way to solve this instead of using computed properties — Owl
– Owl, Commented May 27, 2020 at 16:38
cars data is not very important and myLogic is just logic for return true or false for active or no the active class css. The main issue of this question is the interpolation dynamic name into v-for element. — miltone
– miltone, Commented May 27, 2020 at 17:07
But why do you put your logic into a class in the first place? Can't you just check whatever the "active" class is based on? — P_S
– P_S, Commented May 27, 2020 at 17:36
@darkomen Unless those computed props have unique or very specific logic each, I'd say this approach isn't quite scalable. Why not use a method though? — Yom T.
– Yom T., Commented May 27, 2020 at 18:27

Ilia Brykin · Accepted Answer · 2020-05-27 19:17:51Z

new Vue({
  el: '#app',
  template: `
    <div>
      <ul>
        <li v-for="(item, index) in cars" :key="index" :class="{ active: statusActive[index] }">
          <strong>Car:</strong> {{item.name}} ,      
        </li>
      </ul>

      <button @click="changeCars">Change cars</button>
    </div>
  `,
  data() {
    return {
      cars1: [{
          name: "car1",
        },
        {
          name: "car2",
        },
        {
          name: "car3",
        },
      ],
      cars2: [{
          name: "car1",
        },
        {
          name: "car2",
        },
        {
          name: "car3",
        },
        {
          name: "car4",
        },
      ],
      cars3: [{
          name: "car1",
        },
        {
          name: "car2",
        },
      ],
      carsIndex: 1,
    };
  },
  computed: {
    cars() {
      return this["cars" + this.carsIndex];
    },
    
    statusActive() {
      return {
        0: this.statusActive0,
        1: this.statusActive1,
        2: this.statusActive2,
        3: this.statusActive3,
      };
    },
    
    statusActive0() {
      return false;
    },
    
    statusActive1() {
      return true;
    },
    
    statusActive2() {
      return false;
    },
    
    statusActive3() {
      return true;
    },
  },
  methods: {
    changeCars() {
      if (this.carsIndex < 3) {
        this.carsIndex++;
      } else {
        this.carsIndex = 1;
      }
    },
  },
})

.active {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app"></div>

or

new Vue({
  el: '#app',
  template: `
    <div>
      <ul>
        <li v-for="(item, index) in cars" :key="index" :class="{ active: isActive(index) }">
          <strong>Car:</strong> {{item.name}} ,      
        </li>
      </ul>

      <button @click="changeCars">Change cars</button>
    </div>
  `,
  data() {
    return {
      cars1: [{
          name: "car1",
        },
        {
          name: "car2",
        },
        {
          name: "car3",
        },
      ],
      cars2: [{
          name: "car1",
        },
        {
          name: "car2",
        },
        {
          name: "car3",
        },
        {
          name: "car4",
        },
      ],
      cars3: [{
          name: "car1",
        },
        {
          name: "car2",
        },
      ],
      carsIndex: 1,
    };
  },
  computed: {
    cars() {
      return this["cars" + this.carsIndex];
    },
        
    statusActive0() {
      return false;
    },
    
    statusActive1() {
      return true;
    },
    
    statusActive2() {
      return false;
    },
    
    statusActive3() {
      return true;
    },
  },
  methods: {
    changeCars() {
      if (this.carsIndex < 3) {
        this.carsIndex++;
      } else {
        this.carsIndex = 1;
      }
    },
    
    isActive(index) {
      return this["statusActive" + index];
    },
  },
})

.active {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app"></div>

OK I need to use array for create dynamic system. Thank you for your quality response and example !

Collectives™ on Stack Overflow

dynamic interpolation computed method name in v-for element in vuejs

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related