专栏首页前端之攻略vue 中 $set与$delete的使用

vue 中 $set与$delete的使用

对于对象

Vue无法检测property的添加或移除,由于Vue会在初始化实例时对property执行getter/setter转换,所以propterty必须在data对象上存在才能让Vue将它转换为响应式的。例如

var vm = new Vue({
  data:{
    a:1
  }
})

// `vm.a` 是响应式的

vm.b = 2
// `vm.b` 是非响应式的

对于已经创建的实例,Vue不允许添加根级别的响应式属性,但是可以使用

Vue.set(vm.someObject, "b" ,2)

也可以使用vm.$set实例方法,这也是全局Vue.set方法的别名

this.$set(this.someObject, "b", 2)

如果为已有的对象赋值多个新property

this.someObject = Object.assign({},this.someObject,{a:1,b:2})

例子

            <div class>
              参数名:
              <el-input style="width:170px" v-model="parKey" class="margin_r20"></el-input>参数值:
              <el-input style="width:170px" v-model="parName" class="margin_r10"></el-input>
              <el-button type="primary" size="medium" @click="addPar">增加</el-button>
            </div>参数列表
            <ul class="parList">
              <li v-for="(value, name, index) in AddEditeDialog.netTypeParam" :key="index">
                {{name}} : {{value}}
                <el-button size="mini" round @click="delPar(name)" class="pull-right">删除</el-button>
              </li>
            </ul>
    addPar() {
      this.parKey = this.parKey.trim();
      this.parName = this.parName.trim();    
      this.$set(this.AddEditeDialog.netTypeParam, this.parKey, this.parName);
      // 不能写成this.AddEditeDialog.netTypeParam[this.parKey] = this.parKey
      this.parKey = "";
      this.parName = "";
    },
    delPar(name) {
      this.$delete(this.AddEditeDialog.netTypeParam, name);
    },

对于数组

Vue不能检测以下数组的变动

vm.items[indexOfItem] = newValue
vm.items.length = newLength
var vm = new Vue({
  data: {
    items: ['a', 'b', 'c']
  }
})
vm.items[1] = 'x' // 不是响应性的
vm.items.length = 2 // 不是响应性的
vm.items[indexOfItem] = newVue
// 可以采用下面2种方法实现响应式
Vue.set(vm.items, indexOfItem, newValue) || vm.$set(vm.items, indexOfItem, newValue)
vm.items.splice(indexOfItem, 1, newValue)

vm.items.length = newLength
// 可以采用下面方法实现响应式
vm.items.splice(newLenght)

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • bootstrap 模态框垂直居中实现方法 原

    (adsbygoogle = window.adsbygoogle || []).push({});

    tianyawhl
  • threejs 场景切换 优化性能

    是实现2个场景的定时切换,由于是用在大屏系统,需要浏览器一直能正常运行,不能运行一段时间卡死

    tianyawhl
  • js 数组去重 原

    (adsbygoogle = window.adsbygoogle || []).push({});

    tianyawhl
  • 数据结构于JS也可以成为CP(四)队列

    Hello小伙伴们,好久不见,栈说完了,我们就来说说队列吧~这是个和栈遥相呼应的数据结构呢。还记得栈的特点吗,栈只能在栈顶添加或删除。栈是一种后入先出的结构。而...

    萌兔IT
  • React进阶(4)-拆分Redux-将store,Reducer,action,actionTypes独立管理

    在前面的几小节中已经完成了一个todolist的添加,删除的操作,通过把组件的数据放到了Redux中的公共存储区域store中去存储,在Redux中进行状态数据...

    itclanCoder
  • 使用devtools导致的类型转换异常及Spring Devtools 源码初步解析

    SpringBoot项目中的热部署引发的血的教训,报错代码如下(第6行强制转换,明确可以肯定此处Object肯定是 UserInfoDTO):

    周三不加班
  • ASP.NET AJAX 控件开发基础

    在 JavaScript 当前广泛使用的版本中,它缺少 .NET 开发人员所熟悉的几个 OOP 的关键概念,而 ASP.NET AJAX 可以模拟其中的大多数,...

    张善友
  • AMD和Intel主流CPU性价比和能耗比对比

    zeruns
  • 针对用友ic读卡器 web 脚本的重构

    copy_left
  • KUOKUO的趣味教程 | 小怪物的视野(2)

    本篇承接上一集故事《KUOKUO的趣味教程 | 进击的小怪诞生(1)》,看小怪是如何自我进化的!

    张晓衡

扫码关注云+社区

领取腾讯云代金券