首页 > 其他分享 >Vue的data中对象新增属性后,页面却不渲染(未渲染)

Vue的data中对象新增属性后,页面却不渲染(未渲染)

时间:2024-06-07 14:36:44浏览次数:15  
标签:Vue 渲染 item 页面 data 属性

前提背景: 在data中定义了一个数组 usableList: [],给数组中的每个对象添加checked属性(用来查看数据的勾选状态)   问题: 勾选后,数组的数据已经改变了,但是未渲染到页面中   问题原因: 在于在Vue实例创建时,对象新增的属性并未声明,因此就没有被Vue转换为响应式的属性,自然就不会触发视图的更新。   解决方法一: 使用Vue的全局api $set() this.$set(item, 'saveMoney', f.saveMoney)   解决方法二: 先给附一个默认值 _this.usableList = _this.usableList.map((item) => ({ ...item, checked: false })) 后续在该就可以渲染到页面中了        

标签:Vue,渲染,item,页面,data,属性
From: https://www.cnblogs.com/sunkai6815618/p/18237136

相关文章

  • vue3多个表单一起校验
    当定义了多个表单但是保存时需要同时校验的时候可以这样做<template><el-form:model="userForm1"label-width="auto"ref="userFormRef1"></el-form><el-form:model="userForm2"label-width="auto......
  • 一文搞懂DevOps、DataOps、MLOps、AIOps:所有“Ops”的比较
    引言近年来,“Ops”一词在IT运维领域的使用迅速增加。IT运维正在向自动化过程转变,以改善客户交付。传统的应用程序开发采用DevOps实施持续集成(CI)和持续部署(CD)。但对于数据密集型的机器学习和人工智能(AI)应用,精确的交付和部署过程可能并不适用。本文将定义不同的“Ops”并解释......
  • 【S082】Springboot+Vue电子商城购物系统 购物 商务 前后端分离 含文档
    运行截图:用户登陆商城首页商品分类商品详情页我的购物车下单页面我的订单后台首页用户管理头像管理商品分类管理轮播图管理商品管理订单管理图表分析收入排行榜项目组成:项目源码:项目文档:源码获取⬇⬇⬇......
  • vue2使用Clodop插件打印表格,分页,每页显示页头页尾,自定义纸张大小
    一、前往lodop官网,下载插件,下载中心-Lodop和C-Lodop官网主站 这里下载的window64位的,将插件安装好,运行,会看到引入项目第一种、可以直接将script标签放入vue的head中,在项目运行时自动加载。第二种、也可以将js文件下载至本地,通过import引入,前提是将CLODOP对象export出......
  • Vue3入门 - vue3相比于vue2的优点,及如何创建Vue3项目
    目录一、认识Vue31.Vue2选项式API  vs Vue3组合式API2.Vue3的优势二、使用create-vue搭建Vue3项目1.认识create-vue2.使用create-vue创建项目3.熟悉项目和关键文件一、认识Vue31.Vue2选项式API  vs Vue3组合式API<script>exportdefault{......
  • vue开发环境搭建之安装
    一、node.js安装node.js官网地址:https://nodejs.org/en下载node.js下载完成后,双击安装一直下一步:二、设置镜像地址查看当前镜像源npmconfiggetregistry切换镜像源下载阿里云:npmconfigsetregistryhttps://registry.npm.aliyun.com/淘宝:npmconfigsetregis......
  • 开发视频会议系统:使用GPU解码渲染视频
       现在,使用视频会议系统远程协同办公、沟通交流,已经非常普遍了。如果我们要开发自己的视频会议系统,那么,GPU解码渲染技术是不可缺少的。   在视频会议系统中,经常需要同时观看会议中多个参会人员的视频图像,另外,还可能需要同时观看某人分享的屏幕。   随着大家......
  • GitHub Pages托管Vue3+Vite项目
    前面都没有问题的兄弟,可以直接跳到第七步一、创建一个Vue3+Vite项目并运行1.创建npmcreatevue@latest可以根据自己的需求进行选择2.安装依赖npmi3.运行npmrundev二、修改vite.config.js文件在此文件中,defineConfig中加入base参数,具体如下:exportde......
  • SpringBoot+Vue宿舍管理系统(前后端分离)
    技术栈JavaSpringBootMavenMySQLVueElement-UIShiroMybatis-Plus角色对应功能学生管理员宿管员系统功能截图......
  • SpringBoot+Vue企业客户管理系统(前后端分离)
    技术栈JavaSpringBootMavenMySQLVueElement-UIShiroMybatis-Plus角色对应功能员工管理员系统功能截图......