dcloudio / uni-app

A cross-platform framework using Vue.js
https://uniapp.dcloud.io
Apache License 2.0
40.14k stars 3.63k forks source link

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

Closed CaoMeiYouRen closed 4 years ago

CaoMeiYouRen commented 4 years ago

问题描述 [问题描述:尽可能简洁清晰地把问题描述清楚] 微信小程序端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)

系统信息:

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

dcloudhdx commented 4 years ago

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