前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >解决uni-app props 传递数组修改后不能使用问题

解决uni-app props 传递数组修改后不能使用问题

作者头像
wfaceboss
发布2019-04-25 11:38:23
4.4K0
发布2019-04-25 11:38:23
举报
文章被收录于专栏:wfacebosswfaceboss

1.子组件页面结构

代码语言:javascript
复制
//NoticesMarquee 组件
<view v-for="(item, index) in tempList" :key="index" >
        {{item.Title}}
</view>

2.父组件中使用

在父组件中引用子组件并传递值。

代码语言:javascript
复制
<template>
    <view>
           <!--使用子组件  -->
        <notices-marquee  :items="noticesList" ></notices-marquee>
    </view>
</template>

<script>
        import NoticesMarquee from '@/components/index/NoticesMarquee'
    export default {
        components:{
            NoticesMarquee
        },
        data() {
            return {
                noticesList: [{
                        Title: '4874545454554545454545454',
                        Id: 2
                    },
                    {
                        Title: '7888844844456454564564565465656',
                        Id: 1
                    },
                    {
                        Title: '78947898526665656+56+5+656',
                        Id: 3
                    },
                ],
            };
        }
    }
</script>
<style>

</style>

3.问题描述

3.1 问题概述:

现象为:在setTimeout()中修改值,但是对 items这个数组并不起作用,即修改后的数组与原来一致,并没有达到修改数组的效果,代码如下:

代码语言:javascript
复制
export default {
        props: ['items'],
        methods: {
        showMarquee: function() {
                let _this = this;
                setTimeout(function() {
                    _this.items.push(_this.items[0]);
                    _this.items.shift()
                }, 500)
            },
        },
    }

3.1 解决办法:

使用中间临时数组(tempList(),在created()时就开始将值传递给临时数组,防止出现延时情况,后续单独操作临时数组即可。

代码语言:javascript
复制
export default {
        props: ['items'],
        data() {
            return {
                tempList: []
            }
        },
        methods: {
            showMarquee: function() {
                let _this = this;
                setTimeout(function() {
                    _this.tempList.push(_this.tempList[0]);
                    _this.tempList.shift()
                }, 500)
            },
        },
        created() {
            this.tempList = this.items
        }
    }

推荐是最好的支持,关注是最大的鼓励。亲爱的朋友,很荣幸在园子里遇到您,希望能与您一起学习~~~。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019-04-17 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1.子组件页面结构
  • 2.父组件中使用
  • 3.问题描述
    • 3.1 问题概述:
      • 3.1 解决办法:
      领券
      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档