v-model cannot be used on v-for or v-slot scope variables because they are not writable报错问题解决方案

2023-10-27

报错:
在这里插入图片描述
错误代码:

<div v-for="item in editDetail.key">
     <van-field v-model="item" name="关键词" label="关键词" placeholder="关键词" :rules="[{ required: true, message: '请填写关键词' }]" />
</div>

v-model 不可以直接修改 v-for 循环迭代时别名上的数据

解决方法:
使用对象的索引来进行v-model的值的绑定。

<div v-for="(item,index) in editDetail.key">
	<van-field v-model="editDetail.key[index]" name="关键词" label="关键词" placeholder="关键词" :rules="[{ required: true, message: '请填写关键词' }]" />
</div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

v-model cannot be used on v-for or v-slot scope variables because they are not writable报错问题解决方案 的相关文章

  • vue中使用Echarts地理地图并结合高德地图实现一个国、省、市、区的地图下钻功能

    vue中使用Echarts地理地图并结合高德地图实现一个国 省 市 区的地图下钻功能 一 需求 按不同的层级展示不同的内容 1 中国地图 2 省级地图 3 市级地图 4 县和区以下的地图 二 开发 1 Echarts和地图容器的设置 相关代
  • vue3.0删除node_modules 无用的依赖

    安装插件 npm i depcheck 查看无用的插件 npx depcheck 对应删除 npm uninstall kd layout
  • 前端vue项目部署到tomcat,一刷新报错404解决方法

    原文链接 https my oschina net u 1471354 blog 4277008 VUE项目部署到Tomcat之后 刷新页面会出现404 此问题主要是使用了VUE router的History模式 一 解决方案 1 编辑se
  • Vue (三) 生命周期--钩子函数

    生命周期 Vue官网生命周期的描述 钩子函数 1 beforeCreate 创建Vue实例化之前所调用的函数 div h1 message h1 div
  • vue3使用import.meta.env在vite.config.ts下使用env环境变量的方法

    vue3使用import meta env在vite config ts下使用env环境变量的方法 编程一枚的博客 CSDN博客
  • vue:实现锚点双向滚动/文章章节联动滚动效果

    文章目录 需求描述 实现思路 示例代码 参考网址 需求描述 需要实现类似doc中文档大纲的效果 点击对应章节的名称时定位到相应的正文 而当正文滚动时 高亮显示对应的章节名称 实现思路 其实笔者一开始想到的是利用a标签页内跳转 也就是 锚点
  • ip正则表达式

    var Sip rule value callback gt if 2 5 0 5 0 4 d 0 1 d 1 2 2 5 0 5 0 4 d 0 1 d 1 2 3 test value false callback new Error
  • 微信pc端浏览器打开页面空白的问题

    今天写了一个web项目 用chrome浏览器 手机端微信你打开都没问题 但是在pc端微信打开后是空白的 于是我重新做了一个空白的vue项目 用pc端微信浏览器是可以打开的 慢慢调试发现是语法的问题 一步一步减去组件 再一步一步加上组件 最终
  • Vue与TypeScript的完美结合

    前言 TypeScript 是 JS类型的超集 并支持了泛型 类型 命名空间 枚举等特性 弥补了 JS 在大型应用开发中的不足 在我们自己单独学习 TS时 时常感觉很多知识点还是比较好理解的 但要和框架结合的话 感觉就有点糟 因为我使用Vu
  • ant-design-vue 全局和局部引入组件

    1 全局引入 在main js里面引入 import Vue from vue import ant design vue dist antd css import Antd from ant design vue Vue use Antd
  • Vue项目的部署(服务器)

    Vue项目的部署 服务器 前几天帮朋友写了一个可以动态查看地点温度的前端项目 目前已经部署上线了 访问链接点这里 服务器是朋友的 倒时候打不开会很正常 说不定又使用服务器玩大数据项目去了 效果图 图一 图二 当然 温度也都是实时跟新的 而且
  • Vue出现弹出层时,禁止底部页面跟随滑动

    背景 最近在写一个vue项目 当出现弹出层时 发现底部页面跟随滚动 但是产品不想要这种效果 于是找各种资料 发现很多说法 但是试了试 发现有的根本就不行 比如说有人提出用vue中提供的 touchmove prevent方法来解决 但是我试
  • vue element select下拉框树形多选

    components 文件下新建 SelectTree文件 index vue SelectTree index vue
  • H5查看pdf文件(pdfh5)

    我用的是 pdfh5 来查看的H5中的pdf文件 使用 pdfh5 插件来打开 pdf文件 下面是两种使用方法 方法一 二都可以 但是我在使用方法二时有卡顿现象 可能是因为未开启懒加载 方法二中的 on 可以打印出来错误信息 使用方法 1
  • vue——vue-video-player插件实现rtmp直播流

    更新 flash已不可再使用 大家另寻出路吧 安装前首先需要注意几个点 vue video player插件 其实就是 video js 集成到 vue 中 所以千万不要再安装 video js 可能会出错 视频流我这个项目选择rtmp格式
  • c# asp.net学院学生档案管理系统 计算机毕设源码59121

    摘 要 随着互联网大趋势的到来 社会的方方面面 各行各业都在考虑利用互联网作为媒介将自己的信息更及时有效地推广出去 而其中最好的方式就是建立网络管理系统 并对其进行信息管理 由于现在网络的发达 学生档案信息通过网络进行管理掀起了热潮 所以针
  • vue_table导出excel

    vue直接导出对应table const exportClick gt const wb XLSX utils table to book document querySelector newTables 关联dom节点 get binar
  • 黑豹程序员-自定义表单实现门户自定制

    功能 用户可以实现欢迎页面自己定制 数据由数据库表进行维护 原理 页面利用div进行布局 拖动div记录其坐标 并写库 页面加载时从数据库表中读取div坐标和数据即可 效果图
  • 基于springboot+vue实现位置的多分馆图书馆推荐系统演示【附项目源码+论文说明】

    基于springboot实现位置的多分馆图书馆推荐系统演示 摘要 时代的变化速度实在超出人类的所料 21世纪 计算机已经发展到各行各业 各个地区 它的载体媒介 计算机 大众称之为的电脑 是一种特高速的科学仪器 比人类的脑袋要灵光无数倍 什么
  • ❤ Vue3 使用

    Vue3 使用 Vue3之toRefs的使用 作用 toRefs 可以将一个响应式的对象 转换成普通对象 但是转换后的普通对象的每一个属性值都是响应式的 这样我们可以使用es6的对象解构或者三点运算符等操作 代码

随机推荐

  • 详解Scrapy Cluster中Kafka与Redis的消息生产和消费

    相对于Scrapy框架 增加了Kafka和Redis模块的Scrapy Cluster要复杂的多 因此要搞清楚各大模块之间是如何工作的 就至关重要了 在Scrapy Cluster框架中 有三大系统模块 Kafka Redis Scrapy
  • type-c 介绍

    自从Apple发布了新MacBook 就一堆人在说USB Type C 我来从硬件角度解析下这个USB Type C 顺便解惑 特色 尺寸小 支持正反插 速度快 10Gb 这个小是针对以前电脑上的USB接口说的 实际相对android机上的
  • 七夕 H5小游戏,人脸融合搭载颜值评分

    七夕节因为其独特的文化属性成为各家大显神通的战场 人工智能时代 AI 七夕的玩法也越来越多 人脸融合 颜值评分这些有趣的黑科技都多少与大家见过面 但是将两个有趣的点结合到一起还是第一次 七夕 x H5小游戏 x 黑科技 近日 旷视科技的Fa
  • 揭开正则表达式的神秘面纱

    正则表达式30分钟入门教程 http deerchao net tutorials regex regex htm 揭开正则表达式的神秘面纱 http www regexlab com zh regref htm 原创文章 转载请保留或注明
  • angular:ng-star-inserted作用

    参考 javascript Angular 5 adds ng star inserted in some classes what is that Stack Overflow BrowserAnimationsModule来使用的 控制
  • chatgpt赋能python:如何用Python输出HelloWorld?

    如何用Python输出Hello World 作为初学者入门Python编程 输出Hello World是一个最基本的练习 那么 究竟该如何用Python输出Hello World呢 环境准备 在开始之前 需要先安装Python 并确保环境
  • (亲试有效)u盘制作启动盘后空间容量变小解决方法

    问题 大家有可能使用U盘来制作启动盘的需要 但是使用过来发现U盘的空间容量变小了 1G 2G 4G 8G 16G等变成了几百M都有可能 但是无论你再怎么格式化 还是找不回原来的空间容量 怎么办呢 自己经历过 亲身体验有效 方法简单 所以写出
  • 百度交易中台之账房系统架构浅析

    导读 百度交易中台作为集团移动生态战略的基础设施 面向收银交易与清分结算场景 为赋能业务提供高效交易生态搭建 目前支持百度体系内多个产品线 主要包含 小程序 地图打车 百家号 招财猫 好看视频等 本文主要介绍了百度交易中台的商户财务对账相关
  • 关于获取时间戳函数gettimeofday的用法小结

    Linux下gettimeofday函数 2020年6月8日16点33分 函数头文件及原型为 include
  • 常用LaTex指令

    目录 表格 跨行 列 表格 图片 双栏图片 单栏图片 多图 左中右 字体 加粗 斜体 公式 加粗 向量 花体 只适用于大写字母 引用参考文献 引用图片 表格 公式等 脚注 行号 单栏 双栏 格式 去除页码 表格 跨行 列 表格 begin
  • idea 使用Maven 建web项目模板选择

    1 选择模板 2 修改pom xml文件 3 完善目录 需要添加的目录 4 修改web xml 版本 最后修改web xm名即可 完成
  • kafka入门案例

    来源 我是码农 转载请保留出处和链接 本文链接 http www 54manong com id 1228 Conumer demo1 java内容如下 package com lenovo kafka demo import org ap
  • QT 设置样式的两种方式

    1 通过直接加载样式表文件 若现为整个APP加载同一个样式表文件 可直接读取整个qss文件 然后QApplication 设置样式表的成员函数最终继承自父类QGuiApplication 的类对象执行a setStyleSheet cons
  • 星星之火-59:ETSI与FCC在5GHz非授权频谱LAA上要求的差异

    目录 1 ETSI与FCC概述 2 ETSI与FCC在5GHz非授权频谱的比较 2 1 频谱概述 2 2 可用信道数的差异 2 3 基站的发送功率的差异 2 3 雷达信号规范的差异 1 ETSI与FCC概述 ETSI 欧洲电信标准化协会 E
  • golang中的类型断言

    goLang有类型转换 类型断言 类型切换 1 接口类型断言 类型断言就是将接口类型的值 x 装换成类型 T 成功则返回 T 的实例 格式为 x T 不安全 会造成panic 程序中断 v x T 不安全 会造成panic 程序中断 v o
  • Java基础如何学扎实的经验之谈

    文章目录 一 知道Java学习的整体框架 Java基础 Java高级 JavaWeb 二 该怎么学习 入门工具 入门书籍推荐 三 怎么边学边敲代码 训练提示 解题方案 操作步骤 参考代码 四 记笔记的方法 五 其他 六 解决问题的能力 首先
  • java string 转小写_Java String toLowerCase()(String转小写)与示例 - Break易站

    Java 字符串 Java String toLowerCase String转小写 与示例 Java字符串toLowerCase 方法中的字符串的所有字符转换为小写字母 有两种类型的toLowerCase 方法 签名 public Str
  • 通俗讲解:什么是Web

    转自 微点阅读 https www weidianyuedu com content 1017370521955 html 简单的说Web就是为用户提供的一种在互联网上浏览信息的服务 Web服务是动态的 可交互的 跨平台的和图形化的 Web
  • vscode安装_VsCode安装shader glsl环境

    在扩展tab中搜索Shader languages support for VS Code sls for vs code插件 2 安装后搜索glsl canvas 并安装 glsl canvas插件 至此环境安装完成 可新建个工程测试 测
  • v-model cannot be used on v-for or v-slot scope variables because they are not writable报错问题解决方案

    报错 错误代码 div div