首页 > 其他分享 >vue将字段绑定为响应式和不为响应式的情况

vue将字段绑定为响应式和不为响应式的情况

时间:2024-11-11 10:43:24浏览次数:1  
标签:存在 vue 对象 绑定 响应 set 赋值

背景:在项目中,因为自己直接将列表的对象中的字段在vue中赋值了,并且未使用$set方法,导致赋值的字段没有响应式,在页面点击输入,没有数据的变化。

 字段具有响应式的几种方法:

1:前端请求的后端接口返回的数组对象中,返回的字段存在的话,前端会将这个对象中的字段设置为响应式的,存在get和set方法。
2.若该对象的字段一开始不存在,用户在页面上的输入框输入值时,vue会将这个对象中的字段设置为响应式的,存在get和set方法。
3.一开始便在data函数的对象中定义字段
4.使用this.$set方法

响应式丢失:该对象中不存在该字段时,前端直接对对象中的字段赋值时,会造成该字段不存在响应式

标签:存在,vue,对象,绑定,响应,set,赋值
From: https://www.cnblogs.com/123-hh/p/18539260

相关文章

  • 大数据毕业设计:Django电影推荐系统 双协同过滤推荐算法 爬虫 豆瓣电影 vue框架 (建议收
    博主介绍:✌全网粉丝10W+,前互联网大厂软件研发、集结硕博英豪成立工作室。专注于计算机相关专业项目实战6年之久,选择我们就是选择放心、选择安心毕业✌>......
  • 基于Django + Vue的二手电子设备交易平台
    具体实现截图系统测试从多个角度进行测试找到系统中存在的问题是本系统首要的测试目的,通过功能测试寻找出系统缺陷并改正,确保系统没有缺陷。在测试过程中证明系统满足客户需求,发现问题和不足及时改正。测试完成之后得出测试结论。系统测试目的在酒店管理......
  • 基于SpringBoot+Vue+Uniapp微信小程序的医院预约挂号系统设计与实现(精选计算机毕业设
    文章目录1.前言2.详细视频演示3.文档参考3.1论文参考3.2流程设计图3.3数据库表结构设计3.4系统测试部分4.项目运行截图5.技术框架5.1后端采用SpringBoot框架5.2前端框架Vue6.选题推荐毕设案例8.系统测试8.1系统测试的目的8.2系统功能测试9.代码参考10......
  • 基于SpringBoot+Vue的高考志愿智能推荐系统设计与实现(精选计算机毕业设计-源码+文档+
    文章目录1.前言2.详细视频演示3.文档参考3.1论文参考3.2流程设计图3.3数据库表结构设计3.4系统测试部分4.项目运行截图5.技术框架5.1后端采用SpringBoot框架5.2前端框架Vue6.选题推荐毕设案例8.系统测试8.1系统测试的目的8.2系统功能测试9.代码参考10......
  • 【015】基于Spring Boot+Vue的养老院管理系统【原创】
    一.系统开发工具与环境搭建1.系统设计开发工具后端使用Java编程语言的Springboot框架项目架构:B/S架构运行环境:win10/win11、jdk17前端:技术:框架Vue.js;UI库:ElementUI;开发工具:VisualStudioCode;后端:技术:Java语言、mybatisplus、Springboot框架;开发工具:IDEA20......
  • 基于SpringBoot+Vue的高校毕业生就业信息管理系统的设计与实现(源码+lw+部署+讲解)
    文章目录1.前言2.详细视频演示3.具体实现截图4.技术可行性分析5.技术简介5.1后端框架SpringBoot5.2前端框架Vue5.3系统开发平台6.系统架构设计7.程序操作流程8.业务流程设计9.为什么选择我们9.1自己的公众号9.2海量实战案例10.代码参考11.数据库参考12.源码及文档获取......
  • 基于SpringBoot+Vue的在线购物平台的设计与实现(源码+lw+部署+讲解)
    文章目录1.前言2.详细视频演示3.具体实现截图4.技术可行性分析5.技术简介5.1后端框架SpringBoot5.2前端框架Vue5.3系统开发平台6.系统架构设计7.程序操作流程8.业务流程设计9.为什么选择我们9.1自己的公众号9.2海量实战案例10.代码参考11.数据库参考12.源码及文档获取......
  • Vue3 + Pinia:轻松存储数据的终极指南
    Hey小伙伴们!今天我们要聊的是Vue3中一个非常强大的状态管理库——Pinia。Pinia不仅简化了状态管理的复杂度,还提供了丰富的功能,让你在存储数据时更加得心应手。让我们一起来看看如何在Vue3项目中使用Pinia存储数据吧!......
  • vue3中利用路由信息渲染菜单栏
    1.创建路由时将路由信息对象进行抽离将路由信息对象单独抽离到router/routes.ts文件关键:利用路由元信息meta,定义3个属性hidden:控制当前路由是否显示在菜单栏中title:菜单拦名称icon:对应菜单名称前面的图标//对外暴露配置路由(常量路由)exportconstconstantRout=[{......
  • Vue2中使用Element-ui封装表单(el-form)组件动态渲染数据
    1.创建一个searchForm组件,将需要封装的searchForm组件全局注册,为了方便下次直接使用在main.js文件中全局注册importSearchFormfrom'./components/SearchForm'Vue.component('SearchForm',SearchForm)2.在searchForm组件中创建基本结构<template><divclass="ces-......