For loop v-for循环中的动态类concate

这是我的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.name}

---

我有一个doc.type，它是文件夹或文件。我想动态更改fa图标，比如将“fa-”与doc.type连接起来。是否可能？

使用绑定和方法返回格式化的类名

模板：

Vue-

使用以下方法：

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

或使用计算属性：

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

替代方法是这样做（如果使用ES6+）：

---

使用绑定和方法返回格式化的类名

模板：

Vue-

使用以下方法：

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

或使用计算属性：

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

替代方法是这样做（如果使用ES6+）：

---

尝试以下方法：

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

{{doc.name}

---

请阅读此处

尝试以下内容：

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

{{doc.name}

---

阅读这里

实现这一点的方法有很多，这里有一种：

data（）{
返回{
iconTypes：{
'文件夹'：'fa文件夹'，
“文件”：“fa文件”
}
}
},
方法：{
执行命令（doc）{
如果（doc.type==“文件”）{
此.$emit（'file-event-handler'，此处的任何参数）；
//或者简单地说，doSomething（doc）
}
//或者在这里使用开关
}
}

实现这一点的方法有很多，这里有一种：

data（）{
返回{
iconTypes：{
'文件夹'：'fa文件夹'，
“文件”：“fa文件”
}
}
},
方法：{
执行命令（doc）{
如果（doc.type==“文件”）{
此.$emit（'file-event-handler'，此处的任何参数）；
//或者简单地说，doSomething（doc）
}
//或者在这里使用开关
}
}

您检查过吗？fa-{{doc.type}}@Jaybird不工作。它给出编译错误（发出的值而不是错误的实例）错误编译模板：您检查过吗？fa-{{doc.type}}@Jaybird不工作。它给出了编译错误（发出的值而不是错误的实例）错误编译模板：因此，我必须为所有迭代在v-for中运行此方法？是的，然后为每个itemNo调用方法/计算属性。这是完全错误的。Computed属性不是函数。考虑使用<代码>方法< /代码>。如果不是，您将得到

getClassName不是一个函数

错误。@RaynalGobel您完全正确-我把一些东西弄混了。现在修复了我的答案，所以，我必须在v-for中为所有迭代运行此方法？是的，然后为每个itemNo调用方法/计算属性。这是完全错误的。Computed属性不是函数。考虑使用<代码>方法< /代码>。如果不是，您将得到

getClassName不是一个函数

错误。@RaynalGobel您完全正确-我把一些东西弄混了。现在修复了我的答案如果我决定添加更多的文档类型，这将变得混乱如果我决定添加更多的文档类型，这将变得混乱