首页 > 其他分享 >v-for 循环时直接使用 v-model 绑定报错

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

时间:2024-04-25 23:44:51浏览次数:18  
标签:绑定 别名 循环 报错 数组 model

报错信息: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.

 

错误代码

<div v-for="(item, index) in data" :key="index">
    // 直接绑定 v-for循环的item成员会报错
    <input v-model="item" />
</div>

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

 

 

正确代码

<div v-for="(item, index) in data" :key="index">
    // 通过index, 绑定数组中对应项
    <input v-model="data[index]" />
</div>

 

标签:绑定,别名,循环,报错,数组,model
From: https://www.cnblogs.com/yeminglong/p/18158951

相关文章

  • 02-属性事件过滤双向绑定
    es6的对象写法//正常的写法letarr=['逃课','打游戏','欺负小满']lethobbyDetail={name:"大乔",age:4,hobby:arr}console.log(hobbyDetail)//简写//正常的写法letarr=['逃课','打游戏','欺负小满'......
  • 【vue3入门】-【13】class绑定
    class绑定数据绑定的一个常见需求场景是操纵元素的CSSclass列表,因为class是Attribute,我们可以和其他Attribute一样使用v-bind将它们动态的字符串绑定。但是,在处理比较复杂的绑定时,通过拼接生成字符串是麻烦且易出错的。因此,vue专门为class和v-bind用法提供了特殊的功能增强。除......
  • 【vue3入门】-【14】style绑定
    style绑定数据绑定的一个常见需求场景式操作元素的cssstyle列表,因为style是一个Attribute,我们可以和其他Attribute一样使用v-bind,将它们和动态的字符串绑定。但是,在处理比较复杂的绑定时,通过拼接生成字符串是麻烦且容易出错的。因此,vue专门为style的v-bind用法提供了特殊的功能......
  • 【vue3入门】-【16】表单输入绑定
    表单输入绑定在前端处理表单时,我们常常需要将表单输入框的内容同步给JavaScript中相应的变量。手动连接值绑定和更改事件监听器可能会比较麻烦,v-model指令帮我们简化了这一步骤。<template><h3>表单输入绑定</h3><form><!--v-model:在页面中输入信息的同时,下......
  • 【vue3入门】-【5】属性绑定
    属性绑定双大括号不能在htmlattributes中使用。想要响应的绑定一个attribute,应该使用v-bind指令<script>exportdefault{data(){return{msg:"active",myid:"test-id"}}}</script><template><divclass="{{msg}......
  • vue中函数使用、class和style属性、条件渲染、列表渲染、数据的双向绑定、input事件、
    【事件指令中的函数使用】1<!DOCTYPEhtml>2<htmllang="en">3<head>4<metacharset="UTF-8">5<title>Title</title>6<scriptsrc="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"&......
  • 论文笔记-Modeling of dynamic characteristic of particle in transient gas–solid
    对象:气固两相流+数值模拟方法:RCNN=RNN+CNN目标:学习颗粒流的时间和空间不均匀性并预测颗粒动态关注特征:关注颗粒不均匀性对颗粒动力学的独特影响,旨在提出一种基于机器学习的方法来建模颗粒不均匀性和颗粒动力学之间的映射结果:R-CNN模型的预测精度用1-9个时间步长(即1-9ms)的各......
  • vite打包,pdfjs-dist 报错import引入pdfjs-dist报错Top-level await is not available
    Top-levelawaitisnotavailableintheconfiguredtargetenvironment("chrome87","edge88","es2020","firefox78","safari14"+2overrides)node_modules/pdfjs-dist/build/pdf.mjs:17349:53:17349│/****......
  • Prometheus连接Alertmanager报错410
        ......
  • centos8.2报错Failed to download metadata for repo 'BaseOS': Cannot prepare inter
    报错CentOS-8-Base68B/s|38B00:00错误:Failedtodownloadmetadataforrepo'BaseOS':......