Mint-ui cell uses v-if to change icon error report

I want to implement a list of cloud disks, showing folder, xls, pdf, png and other file types. When using v-for to loop cell, add v-if to judge fileType, to further change the icon in slot. But when you modify it in img alone, you will get an error, saying that v-else-if must be placed after using the adjacent elements of v-if. Do not know how to change, ask orz for advice.
this is the page code

<mt-index-list>
        <mt-cell v-for="file in fileList" :key="file.fileId" 
                :title="file.fileName" 
                @click.native="change(file.fileName)"  
                label="">
            <img slot="icon" v-if="file.fileType ==="folder"" style="width:30px;height:30px" src="../../assets/folder.png"/><i class="iconfont icon-arrow-right-copy-copy"></i>
            <img slot="icon" v-else-if="file.fileType ==="xls"" style="width:30px;height:30px" src="../../assets/excel.png"/>
        </mt-cell>
<mt-index-list>

this is the returned data

fileList:[{
        fileId:"1",
        fileSize:0,
        fileName:"1",
        fileType:"folder"
      },{
        fileId:"2",
        fileSize:0,
        fileName:"2",
        fileType:"doc"
      },{
        fileId:"3",
        fileSize:0,
        fileName:"3",
        fileType:"folder"
      },{
        fileId:"4",
        fileSize:0,
        fileName:"4",
        fileType:"folder"
      },{
        fileId:"5",
        fileSize:0,
        fileName:"5",
        fileType:"folder"
      }],

expected effect

clipboard.png

clipboard.png

v-ifmt-cell

clipboard.png

also ask the gods to give us some advice on how to change it

Apr.09,2021

use the function to calculate, pass the type, and return the calculated icon

< hr >

add:

the main reason for your error report is this place

<img slot="icon" v-if="file.fileType ==='folder'" style="width:30px;height:30px" src="../../assets/folder.png"/>
<i class="iconfont icon-arrow-right-copy-copy"></i>
<img slot="icon" v-else-if="file.fileType ==='xls'" style="width:30px;height:30px" src="../../assets/excel.png"/>

this I tag follows the img tag of v-if , so that the template parsing of v-if is thought to be over, so it will prompt you that v-else-if must immediately follow v-if .

you can try

<template v-if="file.fileType ==='folder'">
<img slot="icon"  style="width:30px;height:30px" src="../../assets/folder.png"/>
<i class="iconfont icon-arrow-right-copy-copy"></i>
</template>

replaces the original v-if section.

what I mentioned above is mainly through other methods, for example, you can use a single method to calculate src and icon, and then only need one tag to represent all the images.
of course, it is troublesome to calculate the src with inline code. You may need to import the corresponding picture first, or calculate the class, image and introduce it with background-image

.
Menu