解决v-for中使用v-if或者v-bind:class失效的问题

在v-for循环出来的列表中使用v-bing动态绑定class、v-show或v-if动态控制个别item 场景一般多用于多项选择

原因是在v-for循环的时候 items是动态创建，所以不会被监听并且实时动态控制class

解决方法是 vm.$set 官方文档中有介绍

我的解决方法使用了框架自带多选按钮，将样式呈现出来

但仅仅是样式呈现，在循环items的时候，给它新增属性isSelect

然后在点击选择的时候，动态设置isSelect属性

在提交的时候去循环判断该list每一项的isSelect属性，从而达到同样的效果

以上这篇解决v-for中使用v-if或者v-bind:class失效的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 关于vue v-for循环解决img标签的src动态绑定问题

    在解决这个问题上,遇到了很多错误的方案,一直没有跑通,有些是图片标记出现了,但是图片内容没有出现,这就很让人头疼了,下面,我讲解我操作成功的案例吧. 1.目录结构如下 图片放置在与src同级的static文件夹下,在这里,我放置在slider中 2.数据配置如下: 注意引入的路径,直接从static文件中对应的地方引入. data () { return { product:[ { "src":'../../static/slider/logo1.jpg', "decerat

  • vue中v-for通过动态绑定class实现触发效果

    vue动态绑定class练习. :class="{ '类名1':条件表达式,'类名2':条件表达式- }" <template> <div class="app-*"> <ul> <li v-for="(item,i) of list" :key="i" class="item" @click="clickIndex=i" :class=&quo

  • VUE v-for循环中每个item节点动态绑定不同函数的实例

    一. 业务场景: 一个title 处 可能有 一个或多个按钮, 按钮对应不同的响应事件 二. 思路 : 按钮个数 根据传入的数据length 来循环渲染, 每条数据对应的事件名称 通过动态绑定 三. 封装组件 1. 视图层面 2. 代码部分 2.1 结构部分 <!-- 多个button组件--> <titleAddBtn :addBtnList="addBtnList" @clkCallBk="listenCall"></titleAd

  • Vuejs在v-for中,利用index来对第一项添加class的方法

    (1)在v-for中,利用index来对第一项添加class 在CODE上查看代码片派生到我的代码片 <a class="list-group-item" :class="{'active':!index}" v-for="(i,index) in announcement"> index来源于v-for,i表示遍历的数组的元素,index表示索引. 由于index从0开始,因此如果要指定第一项有active这个类,那么就用v-bin

  • 解决vue组件中使用v-for出现告警问题及v for指令介绍

    解决vue组件中使用v-for出现告警问题及v for指令介绍

    在项目中运行v-for代码段时, <flexbox v-if="roleShow" style="padding:15px; box-sizing: border-box;"> <flexbox-item v-for="role in roles " > <x-button mini :type="role.type" style="padding: 0 14px" @clic

  • 解决python脚本中error: unrecognized arguments: True错误

    出现如图所示错误: 问题: 例如下述代码,给extract_features赋值True,出现上述错误. parser.add_argument('--extract_features', action='store_true') 解决: 简单来说,其实不用管,可以直接去掉赋值,认为其保存了一个布尔值,不是真的,就是假的.若设置了默认值是false,所以当然的就是false,但是如果不设置的话,store_true的意思就是默认存成真的. 补充知识:Anaconda3:conda-script.

  • 完美解决node.js中使用https请求报CERT_UNTRUSTED的问题

    只要调用了没有受信的https就会报错:CERT_UNTRUSTED 简单的解决方法就是设置环境变量回避非授信证书的问题. 只要在请求的代码之前加上如下代码即可: process.env.NODE_TLS_REJECT_UNAUTHORIZED = "0"; 结束!!! 以上就是小编为大家带来的完美解决node.js中使用https请求报CERT_UNTRUSTED的问题全部内容了,希望大家多多支持我们~

  • 解决ASP.NET中

    解决ASP.NET中"/"应用程序中的服务器错误的方法

    学习asp.net中讲解验证控件问题时,我的程序运行时总是提示这样的问题:"/"应用程序中的服务器错误.如下图: 从网上找到了相关的方法: 在webconfig中找到 <appSettings> <add key="aspnet:UseTaskFriendlySynchronizationContext" value="true" /> <addkey="ValidationSettings:Unobtru

  • 完美解决Thinkphp3.2中插入相同数据的问题

    完美解决Thinkphp3.2中插入相同数据的问题

    问题描述 今天在使用TP3.2插入数据的时候,为了避免插入相同的数据(所谓相同的数据,其主键相同或者是唯一索引的字段相同),我创建的索引如下图,主键索引为自增字段,不可能出现重复,即唯一索引可能会出现重复,我希望的是uid,year,mounth,day 这三个字段出现相同的话,就更新当前记录. 问题解决办法 在之前面对这样的问题的时候,我们知道,MySQL提供了ON DUPLICATE KEY UPDATE或者REPLACE INTO来解决. 使用ON DUPLICATE KEY UPDATE

  • 解决Linux系统中python matplotlib画图的中文显示问题

    最近想学习一些python数据分析的内容,就弄了个爬虫爬取了一些数据,并打算用Anaconda一套的工具(pandas, numpy, scipy, matplotlib, jupyter)等进行一些初步的数据挖掘和分析. 在使用matplotlib画图时,横坐标为中文,但是画出的条形图横坐标总是显示"框框",就去查资料解决.感觉这应该是个比较常见的问题,网上的中文资料也确实很多,但是没有任何一个彻底解决了我遇到的问题.零零碎碎用了快3个小时的时间,才终于搞定.特此分享,希望能帮到有同

  • 解决vue2.x中数据渲染以及vuex缓存的问题

    最近在学习Vue.js,把自己遇到的问题做个记录,所以,今天添加一点小笔记. 在项目中遇到两个问题,简单的做个笔记来记录自己解决的问题,可能不是很好的处理办法,欢迎提出,自己还在不断优化中... 第一个是vue在加载页面的时候,会先加载静态资源,这个时候数据还没有请求回来,用户会先看到静态的内容(就是页面固定写死的),过一会才会有数据回来渲染,这体验是很差的,其实解决办法也很简单,就是用vue里的 v-if 来判断请求的数据是否返回... <div class="container&quo

  • 解决URL地址中的中文乱码问题的办法

    解决URL地址中的中文乱码问题的办法 引言: 在Restful类的服务设计中,经常会碰到需要在URL地址中使用中文作为的参数的情况,这种情况下,一般都需要正确的设置和编码中文字符信息.乱码问题就此产生了,该如何解决呢?且听本文详细道来. 1.  问题的引出 在Restful的服务设计中,查询某些信息的时候,一般的URL地址设计为: get /basic/service? keyword=历史 , 之类的URL地址. 但是,在实际的开发和使用中,确是有乱码情况的发生,在后台的读取keyword信息

  • 解决JavaEE开发中字符编码出现乱码的问题

    网上有很多处理字符编码的解决方案,在此,我站着前人的肩膀上作自己的总结. 在我看来,出现乱码问题的解决方法无非就是在3个地方进行编码设置: 1.HTML.JSP等前端页面: 2.后台servlet中request和response对象: 3.服务器配置文件. 1.HTML.JSP等前端页面,出现编码首先看前端某个页面的Meta标签是否正确设置了编码,这个Meta标签也就是页面的头部 <%@ page language="java" import="java.util.*

  • 完美解决在Servlet中出现一个输出中文乱码的问题

    如下所示: 在Servlet中出现一个输出中文乱码的问题,已经解. @Override public void doPost(HttpServletRequest reqeust, HttpServletResponse response) throws ServletException, IOException { //PrintWriter out = response.getWriter();在还没有给response指定编码格式时就获取了他的输出流,所以一直乱码 reqeust.setC

随机推荐