今天发现了个很奇怪的问题,我在做一个:点击列表  使点中的列表项变色的功能,而且是多个大列表项,在每个大列表项里点击切换列表项的时候不影响其他大列表项的选项。

解决思路,因为这些大列表项是请求到的数据v-for出来的,大列表项里的小列表项也是用大列表项里的数据v-for出来的,所以我选择在请求导数据时,给每个小列表项数据加一个isSelect属性,赋值false,

然后在小列表项上面绑定一个class,条件是判断isSelect属性等于某个值,然后这个class就绑定上去,上个代码看看:

<li class="specification" v-for="(groupSpec, groupIndex) in productGroupSpec" :key="groupIndex">
<button :disabled="spec.i" v-for="(spec, itemIndex) in groupSpec.values" :key="itemIndex"
@click="clickSpec(groupIndex, itemIndex, groupSpec.specName, spec.specValue,spec.isSelect)"
:class="{orange:spec.isSelect&&spec.isSelect==1}"
>{{spec.isSelect}}</button>
<!-- :disabled="spec.i" -->
</li>
 
我在请求到数据后先把数据赋值给了productGroupSpec,然后再用循环给productGroupSpec里的小列表项里的每一个列表项加了isSelect属性,并赋值为0,结果试了试,点击页面上的小列表项时,并没反应,然后问了问老同志,
因为vue的特性,变量里是没有getSet方法的,所以后续再点击事件里改变isSelect的值时,vue是捕捉不到isSelect的值变化的,所以,要在给productGroupSpec赋值前,给response里的每个小列表项加上isSelect属性,然后再把response赋值给productGroupSpec,
这样,我们点击小列表项时才能捕捉到isSelect值的变化,估计大家没明白是什么意识,最后总结一句,如果要给请求来的数据加属性,要在刚刚初始化的时候加属性,不要先把请求到的数据赋值给变量后再加属性,否则就会出现这个属性值变化时,vue捕捉不到。

vue中给请求到的数据对象加属性问题的更多相关文章

  1. vue中Axios请求豆瓣API数据并展示到Swipe中

    vue中Axios请求豆瓣API数据并展示到Swipe中 1.首先是安装Axios: 安装方法cnpm install axios --save 等待npm安装完毕: 2.在main.js中引入axi ...

  2. vue中给请求来的数据List ,添加属性false 后,赋值不上问题解决办法

    data() { return { list:[ // 添加属性fale 后的值 ], // 测试数据 goList:[ { name:'张三', phone:'18621958665' }, { n ...

  3. vue-learning:41 - Vuex - 第二篇:const store = new Vue.Store(option)中option选项、store实例对象的属性和方法

    vuex 第二篇:const store = new Vue.Store(option)中option选项.store实例对象的属性和方法 import Vuex from 'vuex' const ...

  4. java使用POI操作XWPFDocument中的XWPFRun(文本)对象的属性详解

    java使用POI操作XWPFDocument中的XWPFRun(文本)对象的属性详解 我用的是office word 2016版 XWPFRun是XWPFDocument中的一段文本对象(就是一段文 ...

  5. eclipse 中main()函数中的String[] args如何使用?通过String[] args验证账号密码的登录类?静态的主方法怎样才能调用非static的方法——通过生成对象?在类中制作一个方法——能够修改对象的属性值?

    eclipse 中main()函数中的String[] args如何使用? 右击你的项目,选择run as中选择 run configuration,选择arguments总的program argu ...

  6. Vue中实现与后台的数据交换(vue-resource)

    vue-resource是Vue.js的一款插件,它可以通过XMLHttpRequest或JSONP发起请求并处理响应.(但是目前它已经停止更新了) 1.在vue中安装vue-resource插件 打 ...

  7. 使用JDK中的安全包对数据进行加解密

    本文以使用DES对称加密算法为例使用jdk对数据进行加密解密. 首先需要了解Provider类,它是jdk引入的密码服务提供者概念,实现了Java安全性的一部分或者全部.Provider 可能实现的服 ...

  8. vue中页面卡顿,使用懒加载

    为给客户更好的客户体验,首屏组件加载速度更快一些,解决白屏问题. 懒加载简单来说就是延迟加载或按需加载,即在需要的时候的时候进行加载. 常用的懒加载方式有两种:即使用vue异步组件 和 ES中的imp ...

  9. vue本地设置请求接口及数据

    1.安装axios yarn add axios 2.在入口文件main.js中设置 import { getRequest, postRequest} from './libs/api';//导入 ...

随机推荐

  1. PHP代码审计笔记--任意文件上传

     0x01 最简单的文件上传 未进行文件类型和格式做合法性校验,任意文件上传 漏洞代码示例: 新建一个提供上传文件的 upload.html <html> <body> < ...

  2. Linux命令之乐--wget

    常见参数: 参数 作用 -b 后台下载模式. -P 下载到指定目录. -t  最大尝试次数. -c  断点续传 -p 下载页面内所有资源,包括图片.视频等. -r 递归下载 实例1,下载本站的所有文章 ...

  3. AD采样模块采集带模拟量真空表值的实验

    实验采用带模拟量,分辨率为1-5V,量程为0--101kpa的真空表 数据采集模块采用DAM-8021,  16位模块 算法描述如下: 真空表读数范围: 0到-101kpa 模拟量输出: 1-5V 一 ...

  4. 部署OpenStack问题汇总(四)--openstack中nova-compute状态status显示为'XXX'的问题

    本博客已经添加"打赏"功能,"打赏"位置位于右边栏红色框中,感谢您赞助的咖啡. 第一次部署openstack的时候就遇见了这个问题,当时的版本是havana, ...

  5. Cannot assign to read only property 'exports' of object '#<Object>'

    基本原因是import 和module.exports 是不能混用在.vue的文件里面的 webpack 2中不允许混用import和module.exports module.exports={ 改 ...

  6. wget 无法建立ssl连接 [ERROR: certificate common name ?..ssl.fastly.net?.doesn?. match requested host name ?.ache.ruby-lang.org?. To connect to cache.ruby-lang.org insecurely, use ?.-no-check-certificate?]

    通过wget下载文件,报错 [root@Redmine-186 opt]# wget https://cache.ruby-lang.org/pub/ruby/2.3/ruby-2.3.6.tar.g ...

  7. 【CF653G】Move by Prime 组合数

    [CF653G]Move by Prime 题意:给你一个长度为n的数列$a_i$,你可以进行任意次操作:将其中一个数乘上或者除以一个质数.使得最终所有数相同,并使得操作数尽可能小.现在我们想要知道$ ...

  8. iOS - 开源框架、项目和学习资料汇总(动画篇)

    动画 1. Core Animation笔记,基本的使用方法 – Core Animation笔记,基本的使用方法:1.基本动画,2.多步动画,3.沿路径的动画,4.时间函数,5.动画组.2. awe ...

  9. springmvc如何访问到静态的文件,如jpg,js,css

    如何你的DispatcherServlet拦截"*.do"这样的有后缀的URL,就不存在访问不到静态资源的问题. 如果你的DispatcherServlet拦截"/&qu ...

  10. npm使用报错解决办法

    在使用脚手架工具进行项目搭建的时候,很多时候会用到npm ,最近用npm的时候遇到一个错误: 'CALL "I:\Program Files\nodejs\\node.exe" & ...