v-for 循环时直接使用 v-model 绑定value报错

最新推荐文章于 2024-08-02 16:11:17 发布
最新推荐文章于 2024-08-02 16:11:17 发布
阅读量4.3k 收藏 4
点赞数 1
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qiao_qiao_happy/article/details/108061903
版权
在Vue中遇到v-for循环时使用v-model直接绑定value会导致错误，提示不能更新迭代变量。原因是v-model无法直接修改v-for源数组。为了解决这个问题，建议使用对象数组，并在对象属性上应用v-model，通过index下标来操作所需数据。
摘要由CSDN通过智能技术生成

v-for 循环时直接使用 v-model 绑定value报错
报错vue v-model directives cannot update the iteration variable ‘x’ itself
将 v-model 直接绑定到 v-for 迭代别名。这将无法修改 v-for 源数组，因为写入别名就像修改函数局部变量一样。考虑使用一个对象数组并在对象属性上使用 v-model。
原因：v-model 不可以直接修改 v-for 循环迭代时别名上的数据，但是，可以通过 index 下标来引用所需的数据，可以达到相同目的


<FormItem v-if="outputNameList.length !== 0" :label-width="40">
最低0.47元/天 解锁文章
huangq_qiao
关注
专栏目录
vue3知识点2. 常用指令v-model :value v-if v-show v-for v-bind: :class :style v-on @
yangyangdt的博客
12-19 9311
vue3基础知识点2 前言： 上一章已经学会如何创建vue实例了，这一章是vue一些的基础知识点，包括模板语言，以及常见的一些命令。最底部有运行好的全部代码链接。
v-model 无法更新迭代变量**本身，v-for实现多组单选互不影响
01-20
单选部分用ElementUI组件编写。 有三个地方要注意： 1.单选框绑定click事件没反应，要用组件自带的change事件绑定。 2.如果v-model绑定的是常量，那生成的多组单选，一组变化，其他组会联动一起变化。 3.v-model无法绑定迭代变量，如上图那么写就会报错： ‘v-model’ directives cannot update the iteration variable ‘i’ itself. 所以正确写法如下： 或 且 非 export default { data ()
工作286:v-model没有值会报错
歌谣的博客
12-28 430
</span> </el-row> <el-form-item label="刊例价"> <span>￥</span> {{ form.price }} </el-form-item> <el-form-item lab...
vue3 计算属性解决服务器返回的整型值，转换为显示的标签值v-model value must be a valid JavaScript member expression.
最新发布
花花鱼的专栏
08-02 490
vue computed计算属性，解决一个值返回标签显示的问题。
‘v-model‘ directives cannot update the iteration variable ‘item‘ itself.
weixin_47692776的博客
12-31 7343
问题代码 <a-row class="list-item" v-for="(item, index1) in personList" :key="index1" > <a-col :span="3"> <span> <!-- 编辑人员信息 --> <editPe
vue 如何在循环中 "监听" 的绑定v-model数据
weixin_30249203的博客
09-10 455
vue 如何在循环中 "监听" 的绑定v-model数据 阅读目录 vue 如何在循环中 "监听" 的绑定v-model数据 1. 普通属性的值进行监听 2. 监听对象的变化 3. 监听对象中具体属性值的变化 4. vue 如何在循环中 "监听" 的绑定v-model数据 回到顶部 1.普通属性的值进行监听 vue中提供了一个wat...
el-checkboxgroup和v-model的经验总结
xjh01的博客
09-25 3909
在写项目时，获取了数据后想要代码比较简洁，但在各种循环时出现了很多问题。 由于获取的数据格式，跟最后需要提交的数据格式不一致，所以一开始打算分为两个数据，一个是负责显示的数据A，另一个是负责绑定的数据B。A负责页面的渲染，B负责最终的提交。 这个过程里面，常出现的两个问题，一个是length undefined如下图 这个提示的原因一般是数据格式不是数组，所以获取不到length属性 另一个是跟上面长得很像 property 'xxx' of undefined，这个是因为对象里没有'xxx'这个属性 所
vue3中使用v-model去显示多选框checkbox是否被选中出现的问题
ply_1060336566的博客
03-26 2169
**问题说明： 当时用v-model去双向绑定多选框的默认选中时，运行报错 <label> <input type="checkbox" v-model="todo.isSelected" /> //todo中的isSelected是布尔值类型的，用来表示多选框是否默认被选中的状态 <span>{{todo.title}}</span> //显示todo对象中的标题 </label> 报错如下： 解决方法：**
vue v-model directives cannot update the iteration variable 'x' itself
蓝花花的天空
05-08 8787
[b][size=medium][color=blue]new Vue({ el: '#app', data: { settings: { runs: [1, 2, 3] } }, methods: { removeRun: function(i) { console.log("Remove", i); ...
vue 解决循环引用组件报错的问题
10-18
今天小编就为大家分享一篇vue 解决循环引用组件报错的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
v-for 循环时直接使用 v-model 绑定报错
LonewoIf的博客
05-29 4554
报错信息：You are binding v-model directly to a v-for iteration alias. This will not be able to modify the v-for source array because writing to the alias is like modifying a function local variable. // 错误...
vetur插件提示 'v-for' directives require 'v-bind:key' directives.错误的解决办法
dev_周的专栏
07-28 3万+
使用VS Code 出现如下问题，如图： Vue 2.2.0+的版本里，当在组件中使用v-for时，key是必须的。 更改vetur配置            vscode->首选项->设置->搜索（vetur） "vetur.validation.template": true, 改成：false
vue.js自定义组件directives
VUE全家桶
07-07 1万+
vue.js自定义组件directives，有时需要对纯 DOM 元素进行底层操作,这时候就会用到自定义指令
遍历对象
陈荣亮的博客
09-17 241
一直以来，遍历对象是个挺麻烦的事，特别是遇到后端那不规范不规则的数据返回的时候，分分钟想掐死…… 算了，我F……佛慈悲，自己动手，丰衣足食。 言归正传，和遍历数组不同，object是没有固定下标和顺序可言的，只能通过key值查找，而key值没有一个很完美的方式查找，for in那些总是伴随着兼容问题，新的keys方法也同样如此，那么要很好遍历对象，首先要解决这个问题。 keys的api在ie...
vue 出现Elements in iteration expect to have 'v-bind:key' directives问题
热门推荐
kit学习笔记
03-03 3万+
搜尽各大神 最后得出原因是eslint检测出现bug解决方法有两种1. v-for 后添加 :key='item'&lt;li v-for="i in list" :key="i"&gt;2. 在build处关闭eslint检测...(config.dev.useEslint ? [createLintingRule()] : []),...
vue v-for报错：Elements in iteration expect to have 'v-bind:key' directives解决方法
maidu_xbd的博客
02-27 3874
报错信息如下图： “迭代中的元素期望具有'v-bind：key'指令” 大意就是说要给一个：key 解决方法如下： &lt;li v-for="user in users" :key="user"&gt;{{user}}&lt;/li&gt; 这样就不会报错啦~ 如果在浏览器中出现警告如下--“vue.esm.js?efeb:628 [Vue warn]: Avoid using ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值