Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

微信小程序端uni-list、uni-list-item使用v-for循环渲染报错 #1450

Closed
CaoMeiYouRen opened this issue Mar 21, 2020 · 1 comment
Closed

Comments

@CaoMeiYouRen
Copy link

问题描述
[问题描述:尽可能简洁清晰地把问题描述清楚]
微信小程序端uni-list、uni-list-item使用v-for循环渲染报错
但是不使用v-for循环渲染不报错。
其他端正常【H5、Android下通过】
复现步骤
[复现问题的步骤]
demo如下

<template>
  <view>
      <!-- 在v-for循环中使用会报错 -->
       <uni-list>
            <uni-list-item
                v-for="(item, i) in list"
                :key="i"
                :title="item.title"
                :show-extra-icon="true"
                :extra-icon="{ color: '#a8a8a8', size: '22', type: item.icon }"
                @click="item.go"
            ></uni-list-item>
        </uni-list>
        
        <!-- 不在v-for循环中使用不报错 -->
       <uni-list>
            <uni-list-item
                class="todo-list-item"
                :title="list[0].title"
                :show-extra-icon="true"
                :extra-icon="{ color: '#a8a8a8', size: '22', type: list[0].icon }"
                @click="list[0].go"
            ></uni-list-item>
            <uni-list-item
                class="todo-list-item"
                :title="list[1].title"
                :show-extra-icon="true"
                :extra-icon="{ color: '#a8a8a8', size: '22', type: list[1].icon }"
                @click="list[1].go"
            ></uni-list-item>
            <uni-list-item
                class="todo-list-item"
                :title="list[2].title"
                :show-extra-icon="true"
                :extra-icon="{ color: '#a8a8a8', size: '22', type: list[2].icon }"
                @click="list[2].go"
            ></uni-list-item>
        </uni-list>
    </view>
</template>

<script>
export default {
    props: {},
    data() {
        return {
            list: [
                {
                    title: '帐号管理',
                    icon: 'gear',
                    go() {
                        uni.navigateTo({
                            url: '../setting/setting'
                        });
                    }
                },
                {
                    title: '帮助与反馈',
                    icon: 'help',
                    go() {
                        uni.navigateTo({
                            url: '../help/help'
                        });
                    }
                },
                {
                    title: '关于应用',
                    icon: 'info',
                    go() {
                        uni.navigateTo({
                            url: '../about/about'
                        });
                    }
                }
            ]
        };
    },
    methods: {},
    computed: {},
    watch: {},
    onLoad() {}
};
</script>

<style lang="scss"></style>

[或者可以直接贴源代码]

预期结果
[使用简洁清晰的语言描述你希望生效的预期结果]
不报错
实际结果
[这里请贴上你的报错截图或文字]
VM201:1 [Vue warn]: Property or method "item" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

(found in pages/my-list/my-list)
console.error @ VM201:1
warn @ mp.runtime.esm.js:613
warnNonPresent @ mp.runtime.esm.js:2026
get @ mp.runtime.esm.js:2080
render @ my-list.vue?a76d:14
Vue._render @ mp.runtime.esm.js:3565
updateComponent @ mp.runtime.esm.js:5696
get @ mp.runtime.esm.js:4425
Watcher @ mp.runtime.esm.js:4415
mountComponent$1 @ mp.runtime.esm.js:5702
Vue.$mount @ mp.runtime.esm.js:6019

VM201:1 TypeError: Cannot read property 'icon' of undefined
at Proxy.render (my-list.vue?a76d:17)
at VueComponent.Vue._render (mp.runtime.esm.js:3565)
at VueComponent.updateComponent (mp.runtime.esm.js:5696)
at Watcher.get (mp.runtime.esm.js:4425)
at new Watcher (mp.runtime.esm.js:4415)
at mountComponent$1 (mp.runtime.esm.js:5702)
at VueComponent.Vue.$mount (mp.runtime.esm.js:6019)
at ve.attached (index.js:1364)

系统信息:

  • 发行平台: [如 微信小程序、H5平台、5+ App等]
    微信小程序
  • 操作系统 [如 iOS 12.1.2、Android 7.0]
    小程序开发者工具
  • HBuilderX版本 [如使用HBuilderX,则需提供 HBuilderX 版本号]
    2.6.5.20200314
  • uni-app版本 [如使用Vue-cli创建/运行项目,则提供npm run info的运行结果]
  • 设备信息 [如 iPhone8 Plus]

补充信息
[可选]
[根据你的分析,出现这个问题的原因可能在哪里?]
原因可能是我把v-for放在了uni-list-item上。但是在其他端都通过了所以这应该还是bug

@dcloudhdx
Copy link
Contributor

微信小程序目前不支持这种复杂写法,可以将 extra-icon 数据封装成一个值,不要写成 {}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants