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获取值 的相关文章

  • Javascript 与 Python 关于 Python 'map()' 函数的比较

    Python中有一个函数叫做map这可以让你去 map someFunction x y z 并继续应用该功能的列表 是否有与此功能等效的 JavaScript 我现在刚刚学习Python 虽然我被告知javascript是函数式语言 但我
  • AngularJS 使用 $apply 而不使用 $scope

    我开始使用 AngularJS 并且接受了用它来编写控制器的约定 而不是用 scope 所以我的控制器看起来像这样 myApp controller SomeController function this myModel id 1 nam
  • 如何在光标下的所有元素上调用 mouseover?

    我有一个网络应用程序 每次单击时都会创建一个点 见下文 当我将鼠标悬停在一堆点上时 我希望光标下的每个点都会触发 mouseover 或 mouseenter 事件 然而 只有一个事件被触发 即堆栈 顶部 的点的事件 当鼠标移动到一堆多个点
  • 使用闭包和自调用函数制作计数器

    我想知道为什么这段代码不起作用 var uniqueInteger function var counter 0 return function return counter console log uniqueInteger 0 cons
  • 如何从表中选择所有偶数 id?

    我想从 MySQL 数据库的表中选择所有甚至帖子 ID 然后显示它们 我还想获取所有带有奇怪 id 的帖子并将它们显示在其他地方 我想使用 PHP 来完成此操作 因为这是我使用的服务器端语言 或者 我是否必须选择所有帖子 然后使用 Java
  • Three.js - 在代码中包含网格数据

    我有这个 Three js 代码 其中 JSON 加载器从文件 models mountain json 加载网格 var Three new function this scene new THREE Scene this camera
  • JQuery 动画文本

    找到简单 简单的动画文本是非常困难的 喜欢这个网站上的 内爆 http codecanyon net item jquery text animation full screen preview 233445 http codecanyon
  • 具有行组的 JQuery 斑马条纹表

    我通常将斑马条纹表行设置为奇数 偶数 如下所示 效果很好 table tbody tr visible even this addClass even table tbody tr visible odd this addClass odd
  • Telegram 授权无默认按钮

    使用 Telegram 第 3 方授权的唯一有记录的方法是使用其提供的脚本https core telegram org widgets login https core telegram org widgets login 这个脚本 正如
  • 使用 Javascript / Jquery 的本地存储(不使用 HTML5)

    我想在 javascript 或 jquery 中复制本地存储概念 类似于 HTML5 但不幸的是我不知道如何开始 任何人都可以建议如何使用 javascript 或 jquery 实现本地存储 不使用 HTML5 这是一个有点愚蠢的差事
  • 专用网络:web3.eth.getAccounts() 始终发送空数组

    我正在运行一个私人以太坊网络 我确实用https aws amazon com blockchain templates 整个设置已经完成 AWS 上的设置看起来正确 现在 我正在尝试创建帐户并检索所有这些帐户 为此 我使用以下方法 Web
  • Chrome Javascript 调试器暂停时不会重新加载页面

    有时 当我在 Chrome 中调试某些 javascript 并且暂停了 javascript 时 如果我尝试重新加载页面 chrome 只会 继续 调试器 单步执行到下一个断点 似乎没有任何方法可以强制 javascript 完全停止运行
  • 使用 JavaScript 的计时器

    我想使用java脚本实现计时器 我想随着间隔的变化而减少计时器 Example假设我的计时器从 500 开始 我想要根据级别减少计时器 例如1 一级定时器应减1 且递减速度应较慢 2 2级定时器应递减2 递减速度应为中等3 3级定时器应减3
  • 如何在 angularjs 中修剪()字符串?

    有角度特定的方法吗 如果没有 我应该使用内置的jquery 来做到这一点吗 如果我应该使用内置的jquery 如何在不使用 的情况下访问trim 函数 或者这是必要的 编辑 是的 我知道 str trim 对不起 我需要这个才能在 IE 8
  • Postman - 如何计算 JSON 响应中特定对象的出现次数

    我是 JSON 和 Postman 的新手 我相信我正在尝试做一些非常简单的事情 我创建了一个 GET 请求 它将获得如下所示的 JSON 响应 在下面的例子中我想得到count响应中所有 IsArchived 属性 这些属性的数量因响应而
  • 使用 Lodash 的 TypeScript:_.map(["123", " 234 "], _.trim) 返回 boolean[]?

    我有一个字符串数组 它们已像这样分割 var searchValue 600 800 123 180 var groups searchValue split gt 600 800 123 180 因此项目周围可能存在空格 并且我想删除空格
  • 在 Google Apps 脚本中的文本前插入换行符

    我需要在 Google 文档中的某些文本之前插入一些换行符 尝试过这种方法但出现错误 var body DocumentApp getActiveDocument getBody var pattern WORD 1 var found b
  • 使用 jquery 提供附加功能时菜单未正确对齐

    I need to make a mega menu similar to one as show in image below 到目前为止 我已经能够在某种程度上使其发挥作用 例如jsFiddle 在这里 http jsfiddle ne
  • FullCalendar 检查选择日是否有活动?

    我正在使用 Full Calendar js 插件 到目前为止一切顺利 但我想检查开始和结束之间的选择是否有事件 我只需要返回 true 或 false 基本上 如果日期选择中已经存在事件 我想阻止用户创建事件 var calendar c
  • 获取淘汰赛中被点击元素的索引

    获取无序列表中单击元素的索引的最佳方法是什么 让我举个例子 假设我有以下 HTML 代码 ul li p p li ul 现在我有以下 javascript 代码来获取索引 self itemClicked function data it

随机推荐

  • 手写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绑定