Recently, a small bug was found when using the date selector in element. When I clear the selected date and click search again, the console will report an error, as shown in the following figure:
After troubleshooting, I found that this problem occurs because when we click clear, the value value bound by V-model will change from a value to a null, so the console will report an error. There are also many solutions, such as re assigning value before the next call; Or you can also listen to the value of the V-model, and then solve the problem through judgment. The method I use is to directly judge the value of the V-model, and then assign the value if it meets the conditions. The specific implementation code is as follows:
core code:
//Event Methods
searchTabs() {
// parameters needed on the backend
let data = {
sjlx: this.sjlx,
pageNumber: this.pageSize,
pageSize: this.pageNumber,
zfry: this.road.enforce,
jcjg: this.road.testing,
sfcf: this.road.other,
startTime: "",//start time
endTime: "",//end time
}
// By determining the value of the v-model binding, it must be an Array value and must have two values
if (this.road.dateTime && Array.isArray(this.road.dateTime) && this.road.dateTime.length == 2) {
// Assign the judged value to the startTime and endTime in data above
data.startTime = new Date(this.road.dateTime[0]) // start time
data.endTime = new Date(this.road.dateTime[1]) // end time
}
}
Full code:
html
<div>
<el-date-picker
v-model="road.dateTime"
type="datetimerange"
start-placeholder="start-date"
end-placeholder="end-date"
:default-time="['12:00:00']"
value-format="yyyy-MM-dd"
>
</el-date-picker>
</div>
js
export default {
data() {
return {
pageNumber: 1, //Current page number
pageSize: 10, //how many items are displayed on a page
//search criteria
road: {
dateTime: "", //date
enforce: "", //Road enforcement officer
testing: "", //testing results
whether: "", //whether to penalize
},
}
},
methods:{
//Search
searchTabs() {
// parameters needed on the back end
let data = {
sjlx: this.sjlx,
pageNumber: this.pageSize,
pageSize: this.pageNumber,
zfry: this.road.enforce,
jcjg: this.road.testing,
sfcf: this.road.other,
startTime: "",//start time
endTime: "",//end time
}
// By determining the value of the v-model binding, it must be an Array value and must have two values
if (this.road.dateTime && Array.isArray(this.road.dateTime) && this.road.dateTime.length == 2) {
// Assign the judged value to the startTime and endTime in data above
data.startTime = new Date(this.road.dateTime[0]) // start time
data.endTime = new Date(this.road.dateTime[1]) // end time
}
// call the interface pass data to the backend
search(data).then(res => {
// console.log(res, "search)....")
this.tableData = res.data.records
this.pageTotal = res.data.total
})
},
}
}
So far, the problem has been solved.