vue 循环input获取值

2023-11-07

html代码,循环input,v-model绑定

<view class="content">
            <u--form >
                <view class="list" v-for="(item,index) in analyzeData" :key="item.id">
                    <u-form-item borderBottom>
                        <view slot="label">
                            <view style="min-width: 150rpx;">{{item.analysis_items}}</view>
                            <view>{{item.optionList}} </view>
                        </view>
                        <u--input placeholder="请输入内容" border="none" v-model="item.analyze_item_content"
                            @change="change(item.analyze_item_content,index)"></u--input>
                    </u-form-item>
                </view>
            </u--form>
        </view>

data数据


data() {
            return {
                analyzeData: [],
            }
        },

调取后端接口,获取数据


 // 获取分析内容 --- analyzeData
            getAnalysisContent() {
                let that = this
                const params = {
                    namespace: 'deco_soms', //命名空间
                    TemplateId: 'special_management_information', //对象模板ID
                    serviceId: 'jobSiteAnalysis', //对象服务ID
                    namespaceChannel: 'deco_soms',
                    params: {
                        operationID: this.operation_type, //作业类型id
                        ID: this.specialID //自建id
                    },
                }
                getNamespaceService(params).then(res => {
                    console.log(res)
                    console.log("888", Object.values(res.data.data.result.message))
                    if (res.data.code == 200) {
                        this.analyzeData = Object.values(res.data.data.result.message)
                    }
                    console.log("分析内容", this.analyzeData)
                })
            },

change方法获取每一个input的值


methods: {
           
           //获取input的值
            change(item, index) {
                console.log('change', item, index);
                this.analyzeData[index].analyze_item_content = item

                console.log(this.analyzeData)
            },


            // 提交
            submit() {
                let that = this
                for (var i = 0; i < this.analyzeData.length; i++) {
                    console.log(that.analyzeData[i].system_id)
                    if (that.analyzeData[i].analyze_item_content != null) {
                        var params = {
                            namespace: 'deco_soms', //命名空间
                            TemplateId: 'special_management_jobsite_analysis', 
                            serviceId: 'UpdateDataTableEntry', //对象服务ID
                            namespaceChannel: 'system',
                            params: {

                                where: {
                                    "system.id": that.analyzeData[i].system_id
                                },
                                update: {
                                    "analyze_item_content": that.analyzeData[i].analyze_item_content
                                },
                            },
                        }
                        getNamespaceService(params).then(res => {
                            console.log("提交", res)
                            if (res.data.code == 200) {
                                
                            }
                        })
                    }
                }

            },

        }
    

结果:

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

vue 循环input获取值 的相关文章

随机推荐

  • 手写Mybatis

    Mybatis核心配置文件就是为了配置Configration 因此要首先会解析Mybatis核心配置文件 首先使用dom4J解析Mybatis核心配置文件 新建模块演示dom4j解析 xml 目录放错了 无所谓 引入依赖 从原来项目可以拷
  • MMDrawerController(0.6.0) 文档翻译(简介,非API文档)

    Mutual Mobile Drawer Controller 随着使用抽屉效果的应用越来越多 MMDrawerController应运而生 MMDrawerController是一个仅支持侧边抽屉导航的轻量级库 同时库中还提供了定制展现
  • QListWidget 关闭滚动条,用鼠标拖动QListWidget进行滚动

    效果如下 采用QListWidget显示候选词 然后鼠标可以点击左键进行拖动 实现代码如下 m ListWidget new QListWidget m backgroud m ListWidget gt setViewMode QList
  • SQLite下载历史版本

    SQLITE 指定版本下载 下载地址 SQLite Tags step1 挑选版本 以3 30 1为例 step2 进入下载链接 选则为Classic View 点击18db032d step3 选择下载版本则可
  • 一些servlet的代码

    一些servlet的代码 添加数据 WebServlet name AddServlet value AddServlet public class AddServlet extends HttpServlet StudentService
  • 3.2 回溯法—N皇后问题

    1 问题描述 在 n n n times n n n的棋盘上摆放 n n n个皇后 使任意两个皇后都不能处于同一行 同一列或同一斜线上 2 问题
  • uniapp 跳转支付宝支付

    saId 作用 20000123 支付宝收款码 10000007 支付宝扫一扫 let authUrl alipays platformapi startapp saId 10000007 qrcode decodeURI res code
  • 华为机试 放苹果

    题解 动态规划 采用dp i j 表示 i个苹果放入j个盘子的不同分法数 状态转移 我们首先要明确一点 j个苹果放入i个盘中中 总共有下列两种情况 盘子全部放满 至少有一个盘子不放 为空 一 当i gt j 时 也就是苹果数多于盘子数时 1
  • FreeRTOS学习笔记<中断>

    中断概念 Cortex M的NVIC最多支持240个IRQ 中断请求 1个不可屏蔽中断 NMI 1个Systick 滴答定时器 定时器中断和多个系统异常 Cortex M处理器有多个用于管中断和异常的可编程寄存器 这些寄存器大多数都在 NV
  • 代码编辑神器--VSCode之插件

    代码编辑神器 VSCode之插件 Visual Studio Code 简称VS Code 是一个由微软开发 同时支持Windows Linux 和 macOS 等操作系统的免费代码编辑器 在2019年的Stack Overflow组织的开
  • MySQL引擎

    MyISAM存储引擎 MyIsam 的存储文件有三个 后缀名分别是 frm MYD MYI 其中 frm 是表的定义文件 MYD 是数据文件 MYI 是索引文件 MyIsam 只支持表锁 不支持事务 MyIsam 由于有单独的索引文件 在读
  • STM32单片机初学5-IIC通信驱动OLED屏幕

    在我上篇文章 STM32 软件模拟IIC通信 讲解了软件模拟IIC通信 这篇文章详将细讲解利用软件模拟IIC来控制0 96寸的OLED屏幕 如下图 使其显示字符串 本文将不再对IIC通信原理做详细讲解 所以对IIC通信原理不熟悉的话可以参考
  • NAT技术和代理服务器

    NAT NAT是地址转换协议 将内网地址转换为公网地址 简单的说 NAT就是在局域网内部网络中使用内部地址 而当内部节点要与外部网络进行通讯时 就在网关处 将内部地址替换成公用地址 从而在外部公网 internet 上正常使用 NAT可以使
  • Nginx配置静态资源文件403 没权限及404 Not Found问题解决方法

    Nginx配置静态资源文件403 没权限及404 Not Found问题解决方法 修改配置文件nginx conf 静态文件报错403配置 文件最上方 user nobody改为 user root owner 404错误配置 nginx配
  • Shell脚本——流量探测(自动化运维)

    目的 自动 捕获指定IP或端口的流量生成日志 实现流量探测功能 准备 Root用户权限下才能运行tcpdump脚本 优势 Liunx系统自带 无需安装其他组件 捕获准确度高 缺点 不能同时检测多个IP流量 效率低 重点 日志文件 touch
  • 【报错记录】解决华擎J3455-ITX不插显示器无法开机的问题

    我的J3455 ITX主要当作下载机使用 对付那个速度奇慢的百度云 速度任它慢 我7 24小时不停的下 总能下完 然后又嵌套了一个CentOS7的虚拟机 用于作为GitLab代码服务器使用 可以说是一举多得 但是最近发现这台经常掉线 远程桌
  • idea集成visualvm插件 以及添加visual GC插件 - 监控程序

    安装VisualVM插件 1 插件安装 setting gt Plugings gt VisualVM launcher gt Search in repositories gt install gt Restart IDEA 安装完成之后
  • Java——Intellij IDEA出现java.lang.ClassNotFoundException: com.mysql.jdbc.Driver处理办法

    Intellij IDEA出现 Exception in thread main java lang ClassNotFoundException com mysql jdbc 处理办法 解决方法 File gt project struc
  • git修改提交记录的邮箱

    前言 旧仓库迁移到新的git仓库 而新仓库开启了规则 检查 Git 提交的提交者 Committer 和提交作者 Author 必须是已验证的邮箱 于是 旧的代码仓库无法整库迁移 提交时提示 remote 提交 52954f93882138
  • vue 循环input获取值

    html代码 循环input v model绑定