解决uni-app props 传递数组修改后不能使用问题
2024-10-18 05:24:53
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
}
}
推荐是最好的支持，关注是最大的鼓励。亲爱的朋友，很荣幸在园子里遇到您,希望能与您一起学习~~~。
最新文章
- 问题记录：JavaFx 鼠标滑轮滚动事件监听！
- 从PowerDesigner表字段的Name到EF实体类属性的Display Name（根据PowerDesigner生成EF实体类中文注释和验证元数据）
- CSS3 选择器——基本选择器
- Light OJ 1019 - Brush (V)（图论-dijkstra）
- sdut 2163:Identifiers（第二届山东省省赛原题，水题）
- Oracle 中union的用法
- 在yii中使用分页
- C#参数化SQL查询
- SVN服务器搭建和使用
- Win8启用便签
- API各函数作用简介
- MySQL中数据表的增操作
- socket网络编程快速上手（二）——细节问题（3）
- Hibernate快速入门实例
- Robot Framework自动化测试框架初探
- JavaScript中call和apply方法的使用
- SourceInsight宏插件2(非常好用，强力推荐)
- Mafly.Mail实现发送邮件
- 启动docker容器时的Error response from daemon: devmapper: Error mounting: invalid argument. 错误解决
- idea本地跑代码和链接开发机设置