uniapp微信小程序:key失效的解決方法
更新時(shí)間：2021年01月20日 14:35:18 作者：灬都是個(gè)謎
這篇文章主要介紹了uniapp微信小程序:key失效的解決方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
uniapp 代碼
<template>
<view>
<image v-for="(item, i) in fileList" :key="item[urlKey]" :src="item[urlKey]"></image>
</view>
</template>
<script>
export default {
props: {
urlKey: {default: 'url'},
fileList: Array
}
}
</script>
編譯到 微信小程序
<view>
<block wx:for="{{fileList}}" wx:for-item="item" wx:for-index="i" wx:key="urlKey">
<image src="{{item[urlKey]}}"></image>
</block>
</view>
貌似不支持 :key="item[urlKey]" 這種語(yǔ)法
解決方案：
<template>
<view>
<image v-for="(item, i) in fileList" :key="key(item)" :src="item[urlKey]"></image>
</view>
</template>
<script>
export default {
props: {
urlKey: {default: 'url'},
fileList: Array
},
computed: {
key() {
return e => e[this.urlKey]
}
}
}
</script>
使用computed就可以解決了
到此這篇關(guān)于uniapp微信小程序:key失效的解決方法的文章就介紹到這了,更多相關(guān)uniapp小程序key失效內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Javascript 檢測(cè)鍵盤(pán)按鍵信息及鍵碼值對(duì)應(yīng)介紹
Javascript中有3個(gè)事件句柄在對(duì)應(yīng)鍵盤(pán)的輸入狀態(tài):按鍵被按下（按下按鍵但還沒(méi)有抬起）、點(diǎn)擊按鍵（按下并抬起按鍵）、按鍵抬起（按鍵抬起之后）,接下來(lái)詳細(xì)介紹，感興趣的朋友可以了解下2013-01-01
這篇文章主要為大家詳細(xì)介紹了BootStrap表單時(shí)間選擇器的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
JavaScript數(shù)組常用方法實(shí)例講解總結(jié)
這篇文章主要介紹了JavaScript數(shù)組及常見(jiàn)方法,結(jié)合實(shí)例形式總結(jié)分析了JavaScript數(shù)組的基本獲取、添加、刪除、排序、翻轉(zhuǎn)等相關(guān)操作技巧,需要的朋友可以參考下2021-09-09
點(diǎn)擊button獲取text內(nèi)容并改變樣式的js實(shí)現(xiàn)
這篇文章主要介紹了點(diǎn)擊button獲取text內(nèi)容并改變樣式的js實(shí)現(xiàn),經(jīng)測(cè)試非常實(shí)用，需要的朋友可以參考下2014-09-09
在JavaScript中,處理時(shí)間和日期是常見(jiàn)任務(wù)之一,涉及到從用戶界面的日期選擇器到服務(wù)器上的時(shí)間戳,再到時(shí)間間隔的計(jì)算,本文將深入探討JavaScript中的時(shí)間處理,需要的朋友可以參考下2023-09-09
uniapp實(shí)現(xiàn)人臉識(shí)別功能詳細(xì)示例
這次使用uni-app框架開(kāi)發(fā)一個(gè)小程序,有一個(gè)刷臉功能,所以下面這篇文章主要給大家介紹了關(guān)于uniapp實(shí)現(xiàn)人臉識(shí)別功能的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-10-10
一步步教你用js簡(jiǎn)單實(shí)現(xiàn)新年倒計(jì)時(shí)
一轉(zhuǎn)眼已經(jīng)臘月了,相信小伙伴們一定想知道我們距離2023新年還有多少天,下面這篇文章主要給大家介紹了關(guān)于如何一步步教你用js簡(jiǎn)單實(shí)現(xiàn)新年倒計(jì)時(shí)的相關(guān)資料,需要的朋友可以參考下2022-12-12
詳解使用grunt完成requirejs的合并壓縮和js文件的版本控制
這篇文章主要介紹了詳解使用grunt完成requirejs的合并壓縮和js文件的版本控制 ，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2017-03-03
這篇文章主要給大家介紹了關(guān)于JS中數(shù)組合并的幾種常見(jiàn)方法,在開(kāi)發(fā)的過(guò)程中,我們很多時(shí)候會(huì)遇到需要將兩個(gè)數(shù)組合并成一個(gè)數(shù)組的情況,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),出現(xiàn)需要的朋友可以參考下2023-07-07
location.hash保存頁(yè)面狀態(tài)的技巧
hash 屬性是一個(gè)可讀可寫(xiě)的字符串，該字符串是 URL 的錨部分（從 # 號(hào)開(kāi)始的部分）。接下來(lái)通過(guò)本文給大家介紹location.hash保存頁(yè)面狀態(tài)的相關(guān)內(nèi)容，感興趣的朋友一起學(xué)習(xí)吧2016-04-04