使用Vue.set完成视图随着对象修改动态变化（列表多选）

TerryCai 发布于2019-08-26 12:10 / 1682人阅读

摘要：但不能检测对象属性的添加或删除，即如果操作对象数据变化，视图是不会随着对象数据变化而变化的。但是，可以使用方法向嵌套对象添加响应式属性。

通过数组的变异方法我们可以让视图随着数据变化而变化。但Vue 不能检测对象属性的添加或删除，即如果操作对象数据变化，视图是不会随着对象数据变化而变化的。使用Vue.set()可以帮助我们解决这个问题。

需求：

可多选的列表：

初始代码： 准备好的数据：

 tag: [
        { name: "马化腾" },
        { name: "马云" },
        { name: "刘强东" },
        { name: "李彦宏" },
        { name: "比尔盖茨" },
        { name: "扎克伯格" }
      ],

template&CSS：


  
      //梦想通过判断每个item的checked的布尔值来决定选中或未选中
    
      {{item.name}}
    
  


.choice-tag-check{
  border: 1px solid #2d8cf0 !important;
  color: #2d8cf0 !important;
}

一开始的想法是将静态数据（或网络请求的数据）添加一个新的字段，通过修改checked为true或false来判断选中状态。

mounted() {
    for(let i = 0 ; i
console.log(this.tag)一下

都添加上了，感觉一切顺利，有点美滋滋。
选择方法methods：
 //选择标签
choiceTagFn(index) {
  if(this.tag[index].checked === false){
    this.tag[index].checked = true
  }else{
    this.tag[index].checked = false
  }
},
随便选两个，然后再console.log(this.tag)一下

数据层tag的checked值已经发生改变，然鹅~~~
视图层是一动不动，说好的响应式呢？
查阅文档后找到了原因：由于 JavaScript 的限制，Vue 不能检测对象属性的添加或删除
那怎么办？官方的说法是：对于已经创建的实例，Vue 不能动态添加根级别的响应式属性。但是，可以使用 Vue.set(object, key, value) 方法向嵌套对象添加响应式属性。
今天的主角就是：Vue.set()

Vue.set( object, key, value )
object：需要更改的数据(对象或者数组)
key：需要更改的数据
value ：重新赋的值
更改后的代码
我们不再使用for来给对象添加字段，而是使用一个新的数组来展示选中与未选中状态
新的数据：
 tag: [
        { name: "马化腾" },
        { name: "马云" },
        { name: "刘强东" },
        { name: "李彦宏" },
        { name: "比尔盖茨" },
        { name: "扎克伯格" }
      ],
 //是否选中
 tagCheck:[false,false,false,false,false,false],

我们就不再直接操作数据，而是操作新的数组
新的template&CSS：

  
    
      {{item.name}}
    
  


新的选择方法methods：
我们可以使用this.$set来代替Vue.set
 //选择标签
choiceTagFn(index) {
  if(this.tagCheck[index] === false){
    //(更改源，更改源的索引，更改后的值)
    this.$set( this.tagCheck, index, true )
  }else{
    //(更改源，更改源的索引，更改后的值)
    this.$set( this.tagCheck, index, false )
  }
},
就大功告成啦实现了列表多选，视图会根据数据（数组，对象）的变化而变化。
如果有错误或者更简单的方法，欢迎大力指出~~~

云服务器 GPU云服务器列表视图列表视图控件 jsp多选列表框 asp 下拉列表多选

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/108163.html

Vue_Vue权威指南

摘要：效率不高，很多多余，称之为脏检查。通过索引设置数组元素并触发视图更新。解决闪烁问题自定义指令自定义指令提供一种机制将数据的变化映射为行为。 Vue特性 Vue只是聚焦视图层，是一个构建数据驱动的Web界面的库。 Vue通过简单 API提供高效的数据绑定和灵活的组件系统轻量数据绑定指令插件化架构从传统后台MVC 向REST API + 前端MV*迁移DOM是数据的一种自然映...

SimonMa 2019-08-21 14:31 评论0 收藏0
Vue面试中，经常会被问到的面试题/知识点(2019改进版)

摘要：在第一版的基础上进行了优化，新增一些面试题知识点，对一些知识点进行更加深入的描述。可以在该钩子中进一步地更改状态，不会触发附加的重渲染过程。改变中的状态的唯一途径就是显式地提交。这两个可以在不进行刷新的情况下，操作浏览器的历史纪录。在第一版的基础上进行了优化，新增一些面试题/知识点，对一些知识点进行更加深入的描述。一、对于MVVM的理解？ MVVM 是 Model-View-Vie...

singerye 2019-08-26 11:00 评论0 收藏0
VUE2.0学习笔记

摘要：添加事件侦听器时使用模式。只当事件是从侦听器绑定的元素本身触发时才触发回调。差别在哪里将特性名转换为从开始支持语法糖，会扩展成一个更新父组件绑定值的侦听器。如果需要条件渲染多个元素，可以使用包裹。 1.前言安装直接用引入（本地或者cdn） npm npm install vue vue-cli官方脚手架 # 全局安装 vue-cli $ npm install --glo...

pumpkin9 2019-08-23 14:38 评论0 收藏0
深入浅出Vue响应式原理

摘要：总结最后我们依照下图参考深入浅出，再来回顾下整个过程在后，会调用函数进行初始化，也就是过程，在这个过程通过转换成了的形式，来对数据追踪变化，当被设置的对象被读取的时候会执行函数，而在当被赋值的时候会执行函数。前言 Vue 最独特的特性之一，是其非侵入性的响应式系统。数据模型仅仅是普通的 JavaScript 对象。而当你修改它们时，视图会进行更新。这使得状态管理非常简单直接，不过理解...

yiliang 2019-08-23 18:34 评论0 收藏0
VUE

摘要：注意指令前面需要加，对指令传递数据赋值使用例如约定速成加上，表示自定义指令不要使用驼峰式命名。需要通过方法实现自定义指令注册完成。 vue Vue.js 构建数据驱动的web界面库。集中实现MVVM 的 VM层。容易与其他库或项目整合通过尽可能简单的API实现相应的数据绑定和组合的视图组件核心：相应的数据绑定系统，数据与DOM保持同步数据驱动的视图，普通的HTML模板中使用特殊的语...

bergwhite 2019-08-19 18:39 评论0 收藏0