v-for绑定v-model

小咪咪 2021-07-25 13:09 178阅读 0赞

原html

<form ref="form" @submit.stop.prevent="handleSubmit">
       <b-form-group v-for="(item, index) in addTaskForm" :key="index" >
            <b-form-input :id="item.id" v-model="item.vModel" required :state="item.state" ></b-form-input>
    
        </b-form-group>
    </form>

原定义的数据形式

addTask:{ 
        gameName: "",
        resume: "",
        details: "",
        reason: '',
        fixed: ''
    },
    
    addTaskForm:  [
     { 
         'state': "gameNameState",
         'id': "gameName-input",
         "vModel": "addTask.gameName",
     },
     { 
         'state': "resumeState",
         'id': "resume-input",
         "vModel": "addTask.resume",
     },
    ]

此时浏览器会报错 `addTask.gameName is undefined`  
需改为以下方式

<form ref="form" @submit.stop.prevent="handleSubmit">
       <b-form-group v-for="(item, index) in addTaskForm" :key="index" >
            <b-form-input :id="item.id" v-model="addTask[item.vModel]" required :state="item.state" ></b-form-input>
    
        </b-form-group>
    </form>

addTask:{ 
        gameName: "",
        resume: "",
        details: "",
        reason: '',
        fixed: ''
    },
    
    addTaskForm:  [
     { 
         'state': "gameNameState",
         'id': "gameName-input",
         "vModel": "gameName",
     },
     { 
         'state': "resumeState",
         'id': "resume-input",
         "vModel": "resume",
     },
    ]

当需要绑定的变量名本来不是对象的属性时，需要转为对象的属性名，
    原理比较简单，就是在JS中对象，获取属性值时使用的方法不同造成的结果，
    如果是使用`对象.属性名`的方式来获取的话，属性名是不能为变量的；
    但是使用`对象[属性名]`这种方式时，属性名就可以为变量。

发表评论取消回复

表情：

评论列表（有 0 条评论，178人围观）

还没有评论，来说两句吧...

相关阅读

相关轻松理解java前期绑定（静态绑定）与后期绑定（动态绑定）的区别。

> 理论概念：（乍一看有些晦涩，建议先看代码再看概念~~）以下是《java编程思想》原句摘抄：程序绑定的概念：绑定指的是一个方法的调用与方法所在的类(方法主

短命女/ 2023年06月18日 04:52/ 0 赞/ 64 阅读

相关静态绑定、动态绑定

[https://www.cnblogs.com/lizhenghn/p/3657717.html][https_www.cnblogs.com_lizhenghn_p_365

「爱情、让人受尽委屈。」/ 2022年10月17日 13:48/ 0 赞/ 509 阅读

相关 C++动态绑定和静态绑定

为了支持c++的多态性，才用了动态绑定和静态绑定。理解他们的区别有助于更好的理解多态性，以及在编程的过程中避免犯错误。需要理解四个名词： 1、对象的静态类型：对象在

Myth丶恋晨/ 2022年06月13日 23:13/ 0 赞/ 339 阅读

相关动态绑定和静态绑定

为了支持c++的多态性，才用了动态绑定和静态绑定。理解他们的区别有助于更好的理解多态性，以及在编程的过程中避免犯错误，需要理解四个名词： 1、对象的静态类型：对象在声明时采

喜欢ヅ旅行/ 2022年06月10日 01:24/ 0 赞/ 387 阅读

相关前期绑定和后期绑定

thinking in java 读书笔记（感悟）；页码：P9 （想看书上怎么讲的。自行翻看 P9 页）写于：2018年3月29日19:2

末蓝、/ 2022年05月28日 04:48/ 0 赞/ 276 阅读

相关 Vue绑定属性绑定Class 绑定style

vue是如何绑定属性和class以及style的下面我将会插入一段代码，本人在代码里做了相当详细的注释。 <template> <!-- v

待我称王封你为后i/ 2022年03月25日 09:36/ 0 赞/ 466 阅读

相关绑定方法与非绑定方法

一,复习 1. xml模块解析xml格式的文档可扩展的标记语言 <tag name="123" >text</ta

雨点打透心脏的1/2处/ 2022年01月08日 01:55/ 0 赞/ 377 阅读

相关 WPF---数据绑定之PasswordBox绑定

一、概述众所周知，绑定的源既可以是依赖属性也可以是普通的CLR属性，而绑定的目标只能是依赖属性。控件PasswordBox的Password属性不是依赖属性，不

超、凢脫俗/ 2021年11月17日 12:54/ 0 赞/ 660 阅读

相关 Java 静态绑定和动态绑定

绑定：一个方法的调用与方法所在的类关联起来。静态绑定：（final、static、private）在程序执行前已经被绑定，也就是说在编译过程中就已经知道这个方法是哪个类的

川长思鸟来/ 2021年09月15日 06:30/ 0 赞/ 452 阅读

相关 js 前绑定后绑定

其主要意思就是看我有没有用过前绑定，即Dom树中的某些元素在还没有创建出来时，就指定该类型的元素一出生就应该拥有的某些事件。在实际开发过程中经常会涉及到前绑定和后绑定。顾名思义

Dear 丶/ 2021年06月24日 14:00/ 0 赞/ 571 阅读