解决 Vue 中 input 输入框被赋值后,无法再修改和编辑的问题

news2025/4/20 16:22:42

目录

需求:

出现 BUG:

Bug 代码复现

解决问题:

解决方法1:

解决方法2

关于 $set() 的补充:


需求:

前段时间,接到了一个需求:在选择框中选中某个下拉菜单时,对应的输入框就得自动填上对应的值。比如在药品名称中选取了生理盐水,下栏的药品单位药品用法就会自动填上对应的值

img

img

出现 BUG:

接到这个需求后,我就想到用 v-model 去改变值,但是实现选中菜单自动填写对应的值后,心想用户想修改某个值怎么办?于是我测试时,发现自动填写的值删除不了,重新选取药品名称也无法改变了。那岂不是相当于写死了?

Bug 代码复现

<el-form-item v-for="(drug, index) in dynamicValidateForm.drugs" :key="index">
    <el-form-item>
        <el-row :gutter="12">
            <el-col :span='11'>
                <el-select v-model="drug.name" clearable filterable placeholder="药品名称" @change="selectDrug($event,index)">
                    <el-option v-for="item in drugs" :key="item.id" :label="item.药品名称"
                        :value="item.药品名称" >
                    </el-option>
                </el-select>
            </el-col>
            <el-col :span='7'>
                <el-input placeholder="药品剂量" v-model="drug.amount" type='number'>
                </el-input>
            </el-col>
            <el-col :span='4'>
                <el-button @click.prevent="removeDrug(drug)" round type="danger"
                    icon="el-icon-delete">删除</el-button>
            </el-col>
        </el-row>
        <el-row :gutter="12">
            <el-col :span='6'>
                <el-input placeholder="药品单位" v-model="drug.unit">
                </el-input>
            </el-col>
            <el-col :span='6'>
                <el-input placeholder="用法" v-model="drug.method">
                </el-input>
            </el-col>
            <el-col :span='6'>
                <el-input placeholder="频率" v-model="drug.freq">
                </el-input>
            </el-col>
            <el-col :span='6'>
                <el-input placeholder="使用时机" v-model="drug.use">
                </el-input>
            </el-col>
        </el-row>
    </el-form-item>
</el-form-item>


data () {
    return {
    	dynamicValidateForm: {
	  domains: [{
	    value: ''
	  }],
	nursings: [],
	drugs: [],
	email: ''
      },
   }
},
methods: {
    selectDrug(e, index) {
         const _this = this;
         this.drugs.forEach(ele => {
             if( ele.药品名称 === e ) {
                 _this.dynamicValidateForm.drugs[index].unit === ele.默认单位)
                 _this.dynamicValidateForm.drugs[index].method === ele.默认用法)
             }
         })
    },
}

解决问题:

然后我查看了官方文档终于明白了:Vue 在实例创建之后添加新的属性到实例上,它不会触发视图更新。

解决方法1:

由此Vue实例创建时,unit 和 method 在dynamicValidateForm中未声明,因此 Vue 就无法对属性执行 getter 和 setter 方法转化过程,以至于dynamicValidateForm 属性不是响应式的,因此无法触发视图更新。所以我们得声明 dynamicValidateForm 这两个对象的属性,如:

data () {
    return {
        dynamicValidateForm: {
              domains: [{
                  value: ''
               }],
              nursings: [],
              drugs: [],
              email: ''
              unit: '', // 在 dynamicValidateForm 中声明 unit 
              method: '' // 在 dynamicValidateForm 中声明 method 
         },
    }
},
methods: {
    selectDrug(e, index) {
         const _this = this;
         this.drugs.forEach(ele => {
             if( ele.药品名称 === e ) {
                 _this.dynamicValidateForm.drugs[index].unit === ele.默认单位)
                 _this.dynamicValidateForm.drugs[index].method === ele.默认用法)
             }
         })
    },
}

解决方法2

我们可以使用 Vue 的全局 API : $set()赋值:

data () {
    return {
    	dynamicValidateForm: {
	  domains: [{
	    value: ''
	  }],
	nursings: [],
	drugs: [],
	email: ''
      },
   }
},
methods: {
    selectDrug(e, index) {
        const _this = this;
        this.drugs.forEach(ele => {
            if( ele.药品名称 === e ) {
                _this.$set( _this.dynamicValidateForm.drugs[index],'unit', ele.默认单位)
                _this.$set( _this.dynamicValidateForm.drugs[index],'method', ele.默认用法)
            }
        })
    },
}

关于 $set() 的补充:

官方文档:向响应式对象中添加一个 property,并确保这个新 property 同样是响应式的,且触发视图更新。它必须用于向响应式对象上添加新 property,因为 Vue 无法探测普通的新增 property (比如 this.myObject.newProperty = 'hi') 注意对象不能是 Vue 实例,或者 Vue 实例的根数据对象。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2336128.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【差分隐私相关概念】瑞丽差分隐私(RDP)-瑞丽散度约束了贝叶斯因子后验变化

分步解释和答案&#xff1a; 在Rnyi差分隐私&#xff08;RDP&#xff09;框架中&#xff0c;通过贝叶斯因子和Rnyi散度的关系可以推导出关于后验变化的概率保证。以下是关键步骤的详细解释&#xff1a; 1. 贝叶斯因子的定义与分解 设相邻数据集 D D D 和 D ′ D D′&#x…

前端快速入门——JavaScript函数、DOM

1.JavaScript函数 函数是一段可重复使用的代码块&#xff0c;它接受输入(参数)、执行特定任务&#xff0c;并返回输出。 <scricpt>function add(a,b){return ab;}let cadd(5,10);console.log(c); </script>2.JavaScript事件 JavaScript绑定事件的方法&#xff1…

10【模块学习】LCD1602(二):6路温度显示+实时时钟

项目&#xff1a;6路温度显示实时时钟 1、6路温度显示①TempMenu.c文件的代码②TempMenu.h文件的代码③main.c文件的代码④Timer.c文件的代码⑤Delay.c文件的代码⑥Key.c文件的代码 2、实时时钟显示①BeiJingTime.c文件的代码②BeiJingTime.h文件的代码③main.c文件的代码如下④…

PDF处理控件Aspose.PDF指南:使用 C# 从 PDF 文档中删除页面

需要从 PDF 文档中删除特定页面&#xff1f;本快速指南将向您展示如何仅用几行代码删除不需要的页面。无论您是清理报告、跳过空白页&#xff0c;还是在共享前自定义文档&#xff0c;C# 都能让 PDF 操作变得简单高效。学习如何以编程方式从 PDF 文档中选择和删除特定页面&#…

如何在不同版本的 Elasticsearch 之间以及集群之间迁移数据

作者&#xff1a;来自 Elastic Kofi Bartlett 当你想要升级一个 Elasticsearch 集群时&#xff0c;有时候创建一个新的独立集群并将数据从旧集群迁移到新集群会更容易一些。这让用户能够在不冒任何停机或数据丢失风险的情况下&#xff0c;在新集群上使用所有应用程序测试其所有…

Day08【基于预训练模型分词器实现交互型文本匹配】

基于预训练模型分词器实现交互型文本匹配 目标数据准备参数配置数据处理模型构建主程序测试与评估总结 目标 本文基于预训练模型bert分词器BertTokenizer&#xff0c;将输入的文本以文本对的形式&#xff0c;送入到分词器中得到文本对的词嵌入向量&#xff0c;之后经过若干网络…

npm和npx的作用和区别

npx 和 npm 是 Node.js 生态系统中两个常用的工具&#xff0c;它们有不同的作用和使用场景。 1. npm&#xff08;Node Package Manager&#xff09; 作用&#xff1a; npm 是 Node.js 的包管理工具&#xff0c;主要用于&#xff1a; 安装、卸载、更新项目依赖&#xff08;包&a…

C++学习之金融类安全传输平台项目git

目录 1.知识点概述 2.版本控制工具作用 3.git和SVN 4.git介绍 5.git安装 6.工作区 暂存区 版本库概念 7.本地文件添加到暂存区和提交到版本库 8.文件的修改和还原 9.查看提交的历史版本信息 10.版本差异比较 11.删除文件 12.本地版本管理设置忽略目录 13.远程git仓…

CCF CSP 第36次(2024.12)(1_移动_C++)

CCF CSP 第36次&#xff08;2024.12&#xff09;&#xff08;1_移动_C&#xff09; 解题思路&#xff1a;思路一&#xff1a; 代码实现代码实现&#xff08;思路一&#xff09;&#xff1a; 时间限制&#xff1a; 1.0 秒 空间限制&#xff1a; 512 MiB 原题链接 解题思路&…

7.thinkphp的路由

一&#xff0e;路由简介 1. 路由的作用就是让URL地址更加的规范和优雅&#xff0c;或者说更加简洁&#xff1b; 2. 设置路由对URL的检测、验证等一系列操作提供了极大的便利性&#xff1b; 3. 路由是默认开启的&#xff0c;如果想要关闭路由&#xff0c;在config/app.php配置…

(五)机器学习---决策树和随机森林

在分类问题中还有一个常用算法&#xff1a;就是决策树。本文将会对决策树和随机森林进行介绍。 目录 一.决策树的基本原理 &#xff08;1&#xff09;决策树 &#xff08;2&#xff09;决策树的构建过程 &#xff08;3&#xff09;决策树特征选择 &#xff08;4&#xff0…

【项目管理】第16章 项目采购管理-- 知识点整理

项目管理-相关文档&#xff0c;希望互相学习&#xff0c;共同进步 风123456789&#xff5e;-CSDN博客 &#xff08;一&#xff09;知识总览 项目管理知识域 知识点&#xff1a; &#xff08;项目管理概论、立项管理、十大知识域、配置与变更管理、绩效域&#xff09; 对应&…

从图像“看出动作”

&#x1f4d8; 第一部分&#xff1a;运动估计&#xff08;Motion Estimation&#xff09; &#x1f9e0; 什么是运动估计&#xff1f; 简单说&#xff1a; &#x1f449; 给你一段视频&#xff0c;计算机要“看懂”里面什么东西动了、往哪动了、有多快。 比如&#xff1a; 一…

鸿蒙案例---生肖抽卡

案例源码&#xff1a; Zodiac_cards: 鸿蒙生肖抽奖卡片 效果演示 初始布局 1. Badge 角标组件 此处为语雀内容卡片&#xff0c;点击链接查看&#xff1a;https://www.yuque.com/kevin-nzthp/lvl039/rccg0o4pkp3v6nua 2. Grid 布局 // 定义接口 interface ImageCount {url:…

宿舍管理系统(servlet+jsp)

宿舍管理系统(servletjsp) 宿舍管理系统是一个用于管理学生宿舍信息的平台&#xff0c;支持超级管理员、教师端和学生端三种用户角色登录。系统功能包括宿舍管理员管理、学生管理、宿舍楼管理、缺勤记录、添加宿舍房间、心理咨询留言板、修改密码和退出系统等模块。宿舍管理员…

驱动-兼容不同设备-container_of

驱动兼容不同类型设备 在 Linux 驱动开发中&#xff0c;container_of 宏常被用来实现一个驱动兼容多种不同设备的架构。这种设计模式在 Linux 内核中非常常见&#xff0c;特别 是在设备驱动模型中。linux内核的主要开发语言是C&#xff0c;但是现在内核的框架使用了非常多的面向…

MySQLQ_数据库约束

目录 什么是数据库约束约束类型NOT NULL 非空约束UNIQUE 唯一约束PRIMARY KEY主键约束FOREIGN KEY外键约束CHECK约束DEFAULT 默认值(缺省)约束 什么是数据库约束 数据库约束就是对数据库添加一些规则&#xff0c;使数据更准确&#xff0c;关联性更强 比如加了唯一值约束&#…

责任链设计模式(单例+多例)

目录 1. 单例责任链 2. 多例责任链 核心区别对比 实际应用场景 单例实现 多例实现 初始化 初始化责任链 执行测试方法 欢迎关注我的博客&#xff01;26届java选手&#xff0c;一起加油&#x1f498;&#x1f4a6;&#x1f468;‍&#x1f393;&#x1f604;&#x1f602; 最近在…

林纳斯·托瓦兹:Linux系统之父 Git创始人

名人说&#xff1a;路漫漫其修远兮&#xff0c;吾将上下而求索。—— 屈原《离骚》 创作者&#xff1a;Code_流苏(CSDN)&#xff08;一个喜欢古诗词和编程的Coder&#x1f60a;&#xff09; 林纳斯托瓦兹&#xff1a;Linux之父、Git创始人 一、传奇人物的诞生 1. 早年生活与家…

8. RabbitMQ 消息队列 + 结合配合 Spring Boot 框架实现 “发布确认” 的功能

8. RabbitMQ 消息队列 结合配合 Spring Boot 框架实现 “发布确认” 的功能 文章目录 8. RabbitMQ 消息队列 结合配合 Spring Boot 框架实现 “发布确认” 的功能1. RabbitMQ 消息队列 结合配合 Spring Boot 框架实现 “发布确认” 的功能1.1 回退消息 2.备用交换机3. API说…