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

1.子组件页面结构

//NoticesMarquee 组件 <view v-for="(item, index) in tempList" :key="index" > {{item.Title}} </view>

2.父组件中使用

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

<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这个数组并不起做用,即修改后的数组与原来一致，并无达到修改数组的效果，代码以下:

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()时就开始将值传递给临时数组，防止出现延时状况，后续单独操做临时数组便可。

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 } }

 

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