小百科项目---样式显示问题

问题描述

这儿没有值，应该不显示样式的。
错误原因：直接判断分割字符串后的值。
原代码：

<el-tag
   class="elTag"
   v-for="(tagItem,index) in item.specialDocument.f_special_document_label.split(',') ? item.specialDocument.f_special_document_label.split(',') : undefined"
   v-if="item.specialDocument.f_special_document_label != null"
   :key="index"
   @click="goToList('tag', tagItem)"
   type="warning"
>{{ tagItem }}</el-tag>

解决方法

方法一：先判断再分割

应该先判断是否有值，有值后再分割字符串。

代码如下：

<el-tag
   	class="elTag"
   	v-for="(tagItem,index) in item.specialDocument.f_special_document_label ? item.specialDocument.f_special_document_label.split(',') : undefined"
    v-if="item.specialDocument.f_special_document_label != null"
    :key="index"
    @click="goToList('tag', tagItem)"
    type="warning"
>{{ tagItem }}</el-tag>

方法二：放在template标签中

将其放在template中，此标签只显示其里面的东西，若没有就不展示。
在template中，即使v-for="(tagItem,index) in item.specialDocument.f_special_document_label.split(',') ? item.specialDocument.f_special_document_label.split(',') : undefined"这样写也没关系，但是最好不要这样写。

代码如下：

<template v-if="item.specialDocument.f_special_document_label">
   <el-tag
       class="elTag"
       v-for="(tagItem,index) in item.specialDocument.f_special_document_label ? item.specialDocument.f_special_document_label.split(',') : undefined"
       :key="index"
       @click="goToList('tag', tagItem)"
       type="warning"
   >{{ tagItem }}</el-tag>
</template>

正确样式：