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

 

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