vue动态给data中添加变量

最新推荐文章于 2024-05-16 19:01:51 发布

每逢佳节掉三根.

最新推荐文章于 2024-05-16 19:01:51 发布

阅读量2.5w

点赞数 4

CC 4.0 BY-SA版权

分类专栏： VUE 文章标签： vue动态给data中添加变量

本文链接：https://blog.youkuaiyun.com/qq_42043377/article/details/88795123

VUE 专栏收录该内容

32 篇文章

订阅专栏

本文介绍如何在Vue应用中动态地为data添加变量，并结合v-model进行赋值操作。通过理解数据结构，使用数组动态创建变量，再将这些变量与v-model进行绑定，实现动态赋值的需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一: 首先你得数据

我的业务是动态给v-model赋值但是你得更改所以做不到一对一这时候你就得动态创建变量

首先你得知道你的数据结构是什么样的,然后你根据你数据的结构用数组动态创建变量

然后用你创建的空数组一一对应v-model赋值

js:

for (var i =0;i< _this.particulars.itemList.length;i++) {
         _this.timeSet.push([]);
           for (var k = 0;k<_this.particulars.itemList[i].taskList.length;k++) {
                  _this.timeSet[i].push({stopTime:'',measureText:''});
                        }
             }

data:

timeSet : [];

html:

<div class="module">
    <div class="question-group" v-for="(item,index) in particulars.itemList" :key="index">
            <p class="group-title">{{item.title}}</p>
            <div class="group-content" v-for="(list,idx) in item.taskList" :key="idx">
                <div class="question">
                    <div class="question-type">整</div>
                    <p class="question-title">{{list.clauseContent}}</p>
                    <div class="question-sub">
                        <p class="title">凭证详情</p>
                        <textarea class="input-show" placeholder="请输入措施内容" v-model="timeSet[index][idx].measureText"></textarea>
                    </div>
                    <div class="question-options form-item-group">
                        <div class="module-wrapper half">
                            <!-- 时间选择(带标题) -->
                            <div class="form-item with-label">
                                <p class="label">任务结束时间<span class="required">*</span></p>
                                <div class="module">
                                    <flat-pickr :config="pickrConfig" placeholder="请选择结束时间" v-model="timeSet[index][idx].stopTime"></flat-pickr>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
    </div>
</div>

希望能帮到你们