美文网首页
vue之列表渲染,数组更新检测

vue之列表渲染,数组更新检测

作者: 墨芊baby | 来源:发表于2018-11-01 17:54 被阅读0次

由于 JavaScript 的限制,Vue 不能检测以下变动的数组:
当你利用索引直接设置一个项时,例如:vm.items[indexOfItem] = newValue
当你修改数组的长度时,例如:vm.items.length = newLength

对象更改检测注意事项:
还是由于 JavaScript 的限制,Vue 不能检测对象属性的添加或删除

实例:
点击选中标签,再次点击取消选中,提交时把最终选中标签的值存入数组传给后端


image.png
//原理:通过给一个对象添加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()
                    })
                }
}

相关文章

  • vue之列表渲染,数组更新检测

    由于 JavaScript 的限制,Vue 不能检测以下变动的数组:当你利用索引直接设置一个项时,例如:vm.it...

  • vue中的列表(数组)渲染例子

    vue中的列表(数组)渲染例子

  • vue列表渲染

    vue列表渲染v-for类似js语言中的for循环,用vue列表渲染指令渲染数组,可以类比js中用for循环遍历数...

  • Vue 数组更新检测

    Vue 数组更新检测 变异方法 Vue包含一组观察数组的变异方法,所以它们也将会触发视图更新。这些方法如下: pu...

  • Vue 检测数组更新

    1、列表集合检测动态更新 2、更新列表集合里面的某一项Item 1、列表集合检测动态更新问题描述:后台给了我一个b...

  • Vue 数组更新检测

    变异方法 Vue 包含一组观察数组的变异方法,所以它们也将会触发视图更新 替换数组 非变异 (non-mutati...

  • VUE数组更新检测

    今天在做项目的时候,需要向vuex的中的一个数组添加属性。使用的方法为: array[index] = newVa...

  • Vue 数组更新检测

    变异方法 Vue 包含一组观察数组的变异方法,所以它们也将会触发视图更新。这些方法如下: push() pop()...

  • VUE数据data更新而列表不更新,关于VUE的响应式原理的几个

    关于数组 使用数组变异方法对Vue实例中data里面的数组使用变异方法操作的时候,Vue可以检测到变化并进行更新变...

  • vue项目-数组处理

    在vue项目实战 显示|隐藏 查询返回数组 过滤数组 数组去重 渲染列表 思路总结:在没有掌握全部技术的前提下怎么...

网友评论

      本文标题:vue之列表渲染,数组更新检测

      本文链接:https://www.haomeiwen.com/subject/gsnxxqtx.html