CODEWITHSUNDEEP
for-loopvue.js
alikhar2018
alikhar2018

Reputation: 145

Dynamic class concate in v-for loop

This is the my for loop:

      <tr v-for="doc in documents">
        <th></th>
        <th><a href="javascript:void(0)" @click="getChildDocs(doc.id)" :title="doc.type"><i class="fas fa-doc.type fa-lg"></i></a></th>
        <td>{{ doc.name }}</td>
      </tr>

I have a doc.type which is either folder or file. I want to dynamically change fa icon like concatenate 'fa-' with doc.type. Is it possible?

Upvotes: 0

Views: 45

Answers (3)

Maxim
Maxim

Reputation: 2391

Try something like this:

<div v-for="doc in documents" :key="doc.id">
  <th></th>
        <th>
            <a href="javascript:void(0)" @click="getChildDocs(doc.id)" :title="doc.type">
                <i :class="{'fas': true, 'fa-file': doc.type == 'file', 'fa-dir': doc.type == 'dir', 'fa-lg': true}"></i>
            </a>
        </th>
        <td>{{ doc.name }}</td>
</div>

Read here https://v2.vuejs.org/v2/guide/class-and-style.html

Upvotes: 1

Jns
Jns

Reputation: 3257

Use binding and a method to return the formatted class name.

Template: <i :class="getClassName(doc.type)"></i>

Vue -

using a method:

...
methods: {
   getClassName(type){
      return 'fas fa-' + type + ' fa-lg';
   }
}

Or using a computed property:

...
computed: {
   getClassName() {
      return type => `fas fa-${doc.type} fa-lg`;
   }
}

Alternative would be to do something like this (if using ES6+):

<i :class="`fas fa-${doc.type} fa-lg`"></i>

Upvotes: 2

Yom T.
Yom T.

Reputation: 9180

There are many ways to achieve this, here's one:

data() {
  return {
    iconTypes: {
      'folder': 'fa-folder',
      'file': 'fa-file'
    }
  }
},

methods: {
  executeCommand(doc) {
    if (doc.type === 'file') {
      this.$emit('file-event-handler', any_arguments_here);
      // or simply this.doSomething(doc)
    }

    // or use a switch here
  }

}

<a href="#" @click.prevent="executeCommand(doc)"
  <i class="[ 'fas fa-lg', iconTypes[doc.type] ] "></i>
</a>

Upvotes: 0

Related Questions