mint-ui cell 使用v-if改變icon報錯

我想實現(xiàn)一個云盤列表，顯示文件夾、xls、pdf、png等文件類型，在用v-for循環(huán)cell的時候，加v-if來判斷fileType，以此來進(jìn)一步改變slot里的icon。但是單獨在img里修改的時候會報錯，說v-else-if必須放在使用了v-if的相鄰元素后才可以。不知道該怎么改，求指教orz。
此為頁面代碼

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

此為返回的數(shù)據(jù)

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'
      }],

預(yù)期效果

報錯內(nèi)容

也試過將v-if寫在mt-cell標(biāo)簽里，但是這樣做了后顯示如圖

還請大神們指點一下該怎么改一下才可以呢

回答

編輯回答

紓惘

用函數(shù)計算，將type傳遞過去，返回計算出來的icon

補充：

你的報錯原因主要是這個地方

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

這個i標(biāo)簽緊跟在v-if的img標(biāo)簽的后面，使得v-if的模板解析的時候認(rèn)為已經(jīng)結(jié)束了，所以會提示你v-else-if必須緊跟在v-if后面。

你可以嘗試用

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

替代原來的那個v-if的部分。

我上面提的主要是通過其他的方法，比如你可以單獨用一個method計算出src和icon，然后只需要一個標(biāo)簽就可以表示出所有的圖片了。
當(dāng)然，用內(nèi)聯(lián)的代碼計算出的src比較麻煩，可能需要先import對應(yīng)的圖片，或者計算出class，圖片用background-image來引入就行了

2017年2月27日 05:12