由于 JavaScript 的限制,Vue 不能检测以下变动的数组:
当你利用索引直接设置一个项时,例如:vm.items[indexOfItem] = newValue
当你修改数组的长度时,例如:vm.items.length = newLength
对象更改检测注意事项:
还是由于 JavaScript 的限制,Vue 不能检测对象属性的添加或删除
实例:
点击选中标签,再次点击取消选中,提交时把最终选中标签的值存入数组传给后端
//原理:通过给一个对象添加key value作为标识 isActive: 'selected'
data() {
return {
skinTypeList:[
{
key: '干燥',
value: 'DRY'
},
{
key: '松弛',
value: 'RELAXATION'
},
{
key: '色斑',
value: 'SPLASH'
}
],
btnDisable: false //提交时做个标识
}
}
//点击时执行方法如下:
selectTag(index){
let item = this.skinTypeList[index]
let oldArr = {
key: item.key,
value: item.value
}
let newArr = {
key: item.key,
value: item.value,
isActive: 'selected'
}
if(item.isActive === 'selected'){
this.skinTypeList.splice(index,1,oldArr) //如标签为选中状态,再次点击时重新构造数组, 取消选中
let arrIndex = this.saveTagList.indexOf(item.value) //找当前item.value在saveTagList中的位置,并删掉
this.saveTagList.splice(arrIndex,1) // 重新构造saveTagList数组
} else {
this.skinTypeList.splice(index,1,newArr)//如点击前是不选中状态,那么点击时重新构造数组,为选中状态
this.saveTagList.push(item.value) // 并把item.value push进数组
}
}
//提交时执行方法如下:
//提交时前置手机号和年龄不能为空
submitFace(){
if(this.ageNum && this.phoneNum){
if(this.btnDisable) return //防止多次提交不断发请求
wepy.showLoading({
title: '提交中...',
mask: true
})
this.btnDisable = true //防止多次提交不断发请求
wepy.request({
url: '/mobile/mina/face/save',
method: 'POST',
data: {
age: this.ageNum,
phone: this.phoneNum,
problemTypeList: this.saveTagList
}
}).then((res) => {
if (res.resCode != 0) return
wepy.showToast({
title: '信息提交成功',
icon: 'success',
duration: 2000
})
this.showFaceDia = false
this.phoneNum = ''
this.ageNum = ''
this.saveTagList = [] //防止再次push累加上一次的值
this.skinTypeList.forEach((item)=>{
if(item.isActive) item.isActive=''
})
this.$apply()
})
}
}