vue页面上的form表单无法输入咋回事?

news2024/11/24 19:46:18

记录工作中遇到的问题…
如下图:下拉框选中无法回显,输入框无法输入
在这里插入图片描述
排查了原因,原来是接收的formData不是响应式的

const props = defineProps({
    formData: {
        type: Object,
        default: ()=> [{
            devices:[]
        }]
    },
    })

formData将其放在模板中使用,没有响应式

<div class="form-container" v-for="(ysGsItem, index) in formData">
                <div class="sort-no">
                    序号{{ index + 1 }}
                    <el-button v-if="formData.length > 1 && !disabled" type="danger" plain
                        style="margin-left: auto;" @click="deleteYsGsItem(index)">删除</el-button>
                </div>
                <el-form :model="ysGsItem" label-position="top" :rules="rules"
                    ref="ysGsInfoRef">
                    <el-row type="flex" justify="space-between">
                        <el-col :span="7">
                            <el-form-item label="运输公司名称" prop="key1">
                                <el-select-v2
                                    v-model="ysGsItem.key1"
                                    :options="ysGsList"
                                    :props="{
                                        label: ysGsProp.label,
                                        value: ysGsProp.key
                                    }"
                                    :disabled="disabled"
                                    filterable
                                    @change="id=>ysgcChange(id, ysGsItem)"
                                    placeholder="请选择"
                                >
                                <template #default="{ item }">
                                    <span>{{ item[ysGsProp.label] }}</span>
                                </template>
                                </el-select-v2>
                            </el-form-item>
                        </el-col>
                        <el-col :span="7">
                            <el-form-item label="法定代表人" prop="key3">
                                <el-input v-model="ysGsItem.key3" placeholder=""></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="7">
                            <el-form-item label="联系人电话" prop="key4">
                                <el-input v-model="ysGsItem.key4" placeholder=""></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>

            </div>

解决:
const formData = ref(props.formData),用ref包装成响应式就可以啦!

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

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

相关文章

揭秘APP广告投放数据背后的秘密,Xinstall助你精准触达用户!

随着互联网的发展&#xff0c;App推广和运营的环境也在不断变化。传统的营销方式已难以满足多变的市场需求&#xff0c;如何确保在激烈的竞争中脱颖而出&#xff0c;成为了众多企业关注的焦点。Xinstall作为一款专业的App推广工具&#xff0c;致力于帮助企业解决推广和运营中的…

Linux网络服务之SSH(远程访问及控制)

ssh远程管理&#xff1a; ssh是一种安全通道协议&#xff0c;用来实现字符界面的远程登录。远程复制&#xff0c;远程文本传输。 ssh对通信双方的数据进行了加密 用户名和密码登录 密钥对认证方式&#xff08;可以实现免密登录&#xff09; ssh 22 网络层 传输层 数据传输…

解锁AI大模型的无限潜能:程序员如何深度驾驭这一科技巨轮

前言 随着科技的飞速发展&#xff0c;人工智能&#xff08;AI&#xff09;已经不再是科幻电影中的遥远概念&#xff0c;而是成为了推动社会进步的重要引擎。在AI的众多技术分支中&#xff0c;大模型以其卓越的性能和广泛的应用前景&#xff0c;成为了科技领域的明星技术。作为…

Transformer学习(2)

这是Transformer的第二篇文章&#xff0c;上篇文章中我们了解了分词算法BPE&#xff0c;本文我们继续了解Transformer中的位置编码和核心模块——多头注意力。下篇文章就可以实现完整的Transformer架构。 位置编码 我们首先根据BPE算法得到文本切分后的子词标记&#xff0c;然…

[消息队列 Kafka] Kafka 架构组件及其特性(一)

工作中的消息队列用的是Kafka&#xff0c;一直没有系统的了解&#xff0c;这边集中整理一下。 目录 Kafka主要组件有十个部分。 1.Broker&#xff08;服务器&#xff09; 2.Record&#xff08;消息&#xff09; 3.Producer&#xff08;生产者&#xff09; 4.Consumer&…

C++---模板进阶(非类型模板参数,模板的特化,模板分离编译)

我们都学习和使用过模板&#xff0c;而这篇文章我们来将一些更深入的知识。在此之前&#xff0c;我们在使用C编程时可以看到模板是随处可见的&#xff0c;它能支持泛型编程。模板包括函数模板和类模板&#xff0c;我们有的人可能会说是模板函数和模板类&#xff0c;但严格讲这样…

【Python】把xmind转换为指定格式txt文本

人工智能训练通常需要使用文本格式&#xff0c;xmind作为一种常规格式不好进行解析&#xff0c;那如何把xmind转换为txt格式呢&#xff1f; 软件信息 python python -v Python 3.9.13 (tags/v3.9.13:6de2ca5, May 17 2022, 16:36:42) [MSC v.1929 64 bit (AMD64)] on win32…

集成学习笔记

集成学习 简介 决策树 GBDT 拟合残差 一般 GBDT XGBOOST 弓 1 能表达样本落入的子节点&#xff0c;但是不能把表示结构 2 3.正则项 – 惩罚 防止过拟合&#xff0c;比如一个值总共有10颗树都是由同一颗树决定的&#xff0c;过拟合 5 找到一种方式不依赖于损失函数 …

【Modelground】个人AI产品MVP迭代平台(3)——工程化架构设计

文章目录 背景monorepo多项目调试/打包公共静态资源服务公共模型拷贝入项目的public文件夹总结 背景 Modelground中的项目&#xff0c;基本都依赖Mediapipe模型&#xff0c;因此&#xff0c;有很强的需要对Mediapipe进行封装&#xff0c;其余项目都调用这个封装库。从架构上&a…

文字生成视频!又一王炸!!!(且免费使用!)

VIVA王炸 开场 “ 生成令人惊叹的AI视频&#xff0c;再加上4K视频增强和初学者友好的自动提示优化&#xff0c;为您提供无与伦比的视频创作体验。” 直抒胸臆 自从sora的出现&#xff0c;开启了人工智能的有一个阶段。VIVA是现在唯数不多的与OpenAI的sora互相抗衡。也是为数…

Orange Pi AI Pro 开箱 记录

香橙派 AIpro&#xff08;OrangePi AIpro&#xff09;是一款面向AI开发的强大开发板&#xff0c;提供了高性能和多功能的开发环境。我将结合自己的开发经验&#xff0c;详细介绍这款开发板的性能、适用场景及使用体验。 一、产品概述 香橙派 AIpro配备了强大的硬件配置&#…

String类知识

目录 一、String存在意义 二、字符串为何不可变 三、String类常用方法 1、字符串构造 2、String对象的比较 3、字符串查找 4、转化 &#xff08;1&#xff09;数值和字符转化 &#xff08;2&#xff09;大小写转换 &#xff08;3&#xff09;字符串转数组 &#xff08;4&…

不同类型红酒的保存期限与品质变化

云仓酒庄雷盛红酒&#xff0c;以其多样的品种和与众不同的风味吸引了无数葡萄酒爱好者。然而&#xff0c;不同类型和风格的红酒在保存过程中&#xff0c;其期限和品质变化也各不相同。本文将深入探讨这个问题&#xff0c;以帮助消费者更好地理解和欣赏云仓酒庄雷盛红酒的多样性…

智慧互联网医院系统开发指南:从源码到在线问诊APP

近期&#xff0c;互联网医院系统的热度非常高&#xff0c;很多人跟小编提问如何开发&#xff0c;今天小编将从零开始为大家详解互联网医院系统源码&#xff0c;以及在线问诊APP开发技术。 一、需求分析与系统设计 1.1 需求分析 用户管理 预约挂号 在线问诊 电子病历 药品…

0606 作业

#include <stdio.h> #include <string.h>typedef struct usr{char unm[21];char pwd[21]; }user;int main(int argc, const char *argv[]) {FILE* userfilefopen("./user_tible.txt","r");printf("输入username:");user u;scanf(&qu…

主流的单片机语言是 C 吗?是的话为啥不是 C++?

是c&#xff0c;而且可以预见在很长很长一段时间&#xff0c;没有巨大变革的情况下都会是c 商业项目开发光讨论语言特性优劣问题&#xff0c;是非常片面的&#xff0c;所以要看待为什么是c&#xff0c;最主要仍然是从收益和成本上来看。 刚好我有一些资料&#xff0c;是我根据…

【postgresql初级使用】初识触发器,在数据行发生变化时自动执行用户行为,也可以SQL级别触发,特别是视图上可以有触发器了

初识触发器 ​专栏内容&#xff1a; postgresql使用入门基础手写数据库toadb并发编程 个人主页&#xff1a;我的主页 管理社区&#xff1a;开源数据库 座右铭&#xff1a;天行健&#xff0c;君子以自强不息&#xff1b;地势坤&#xff0c;君子以厚德载物. 文章目录 初识触发器概…

深入解析手机信息恢复,2个技巧,做数据安全守护者

在现代社会&#xff0c;手机就像我们的第六感一样&#xff0c;随时能够帮助我们搞定难题。但是&#xff0c;有时候手机也会闹个小脾气&#xff0c;比如误删信息、系统崩溃和硬件故障等&#xff0c;这些问题可了不得&#xff01;它们会让我们无法访问那些重要的数据&#xff0c;…

【机器学习】逻辑回归:原理、应用与实践

&#x1f308;个人主页: 鑫宝Code &#x1f525;热门专栏: 闲话杂谈&#xff5c; 炫酷HTML | JavaScript基础 ​&#x1f4ab;个人格言: "如无必要&#xff0c;勿增实体" 文章目录 逻辑回归&#xff1a;原理、应用与实践引言1. 逻辑回归基础1.1 基本概念1.2 Sig…

Mysql8安装教程与配置(超详细图文)

MySQL 8.0 是 MySQL 数据库的一个重大更新版本&#xff0c;它引入了许多新特性和改进&#xff0c;旨在提高性能、安全性和易用性。 1.下载MySQL 安装包 注&#xff1a;本文使用的是压缩版进行安装。 &#xff08;1&#xff09;从网盘下载安装文件 点击此处直接下载 &#…