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>關于uniapp微信小程序中key失效如何解決問題的解答就分享到這里了,希望以上內容可以對大家有一定的幫助,如果你還有很多疑惑沒有解開,可以關注億速云行業資訊頻道了解更多相關知識。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。