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