请打开代码片段
在input组件中搜索数字1,之后查看console中输出的myData的数据;
得到的输出结果跟data中初始的结果数据不一样;
我在js中并未有函数去修改maData的数据,但是得到的输出结果却被replace函数修改了;
请帮忙看看问题出现在哪,谢谢
这是初始data中的数据:
Page({
data: {
myData: [{
num: "123123123",
}, {
num: "1233123123",
}, {
num: "1231234123",
}, {
num: "134234123123",
}, {
num: "152423123",
}, ],
},
这是搜索后输出的数据:
我在代码里写了,搜索结果是在一个新的数组中,但是原数组myData不能被修改啊,麻烦你帮忙看看我写的代码片段,很简短的,帮我看看这个逻辑哪里错了,为什么原始data会被修改
<!-- wxml -->
<text>input组件搜索文本替换的bug:
请在下方input组件中搜索数字1,之后查看console中输出的myData的数据;
得到的输出结果跟data中初始的结果数据不一样;
我在js中并未有函数去修改maData的数据,但是得到的输出结果却被replace函数修改了;
请帮忙看看问题出现在哪,谢谢
</text>
<input type="text" style='border:1rpx solid #000;' placeholder="搜索数字1" value="{{inputVal}}" focus="{{inputShowed}}" bindinput="inputTyping" />
// js
Page({
data: {
myData: [{
num: "123123123",
}, {
num: "1233123123",
}, {
num: "1231234123",
}, {
num: "134234123123",
}, {
num: "152423123",
}, ],
},
onLoad: function() {
var that = this;
console.log("输出运行onload后的that.data.myData", that.data.myData)
},
// 边输入边搜索
inputTyping: function(e) {
var that = this;
var inputVal = e.detail.value
that.setData({
inputVal: e.detail.value,
searchResult: [],
})
console.log("输出运行搜索后的that.data.myData", that.data.myData)
that.getSearchResult(inputVal)
},
getSearchResult: function(inputVal) {
var that = this;
var myData = that.data.myData
for (let i in myData) {
if (myData[i].num.indexOf(inputVal) >= 0) {
that.data.searchResult.push(myData[i])
}
}
// 延迟运行替换搜索文字的颜色的函数
setTimeout(function() {
that.replace()
}, 100)
},
// 替换搜索文字的颜色
replace: function() {
var that = this;
for (var i = 0; i < that.data.searchResult.length; i++) {
var num = that.data.searchResult[i].num.replace(that.data.inputVal, "<span style='color:#1aad19'>" + that.data.inputVal + "</span>")
that.data.searchResult[i].num = num
}
},
})
搜索“1”之后得到如下截图:
求助求助!