Динамический класс concate в цикле v-for

Question

Это мой цикл for:

      <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>

У меня есть doc.type, который является либо папкой, либо файлом.Я хочу динамически изменить иконку fa, например, объединить fa с doc.type.Возможно ли это?

Answer 1

Попробуйте что-то вроде этого:

<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>

Читайте здесь https://vuejs.org/v2/guide/class-and-style.html

Answer 2

Есть много способов достичь этого, вот один:

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>

Answer 3

Используйте привязку и метод для возврата отформатированного имени класса.

Шаблон: <i :class="getClassName(doc.type)"></i>

Vue -

, используя метод:

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

Или используя вычисляемое свойство:

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

Альтернативой было бы сделать что-то вроде этого (при использовании ES6 +):

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