制作一个添加工作经验的功能

前言

前几天给一个app做项目经验添加功能时，自己犯了几个错误，于是决定总结一下，算是写成一个demo，给大家参考一下吧。

具体实现

添加工作经验的页面如图1，这是一个用户的详情页面，每条工作经验的右上角，添加了删除按钮，区域的下方有继续添加经历的按钮。说白了，这个功能就是实现对表单数据的增、删、改功能。首先，我从后端接口中获取到用户的工作经验数据（也可能是一个空数组），这块的逻辑我们很容易写出来，就是根据获取到的值进行遍历即可。

    <div v-for="(item, index) in experiences" :key="item.id">
        <div class="detail">
            <image class="closeIcon" :src="iconPath('icon_gb_small')"
                   @click="removeExperience(item.id)"></image>
            <text class="unselect-txt">开始时间</text>
            <input class="input" type="date"
                   v-model="item.startDate"></input>
            <image class="icon" :src="iconPath('icon_pen')"></image>
        </div>
        <div class="detail">
            <text class="unselect-txt">结束时间</text>
            <input class="input" type="date"
                   v-model="item.endDate"></input>
            <image class="icon" :src="iconPath('icon_pen')"></image>
        </div>
        <div class="detail2">
            <text class="unselect-txt">从业说明：</text>
            <textarea  v-model="item.introduction" class="textarea"></textarea>
        </div>
        <div class="list-gap"></div>
    </div>

    <div>
        <div class="next-btn" @click="addNextExperience">
            <text class="next-button">继续添加经历</text>
        </div>
    </div> 
    <div class="btn" @click="addUserMaterial">
            <text style="font-size: 28px;color: #ffffff;">完成</text>
    </div>                          

我们在input和textarea中使用v-model进行数据的双向绑定。我们都知道，vue实现了一套虚拟的DOM，我们不需要直接操作DOM元素，只需要操作数据就可重新渲染页面。而背后的原理得益于高效的Diff算法，具体的原理我不在这阐述。key的作用是为了高效的更新虚拟DOM。所以为了让vue可以区分他们，我们在做循环或相同标签元素的过渡切换时，都有必要使用到key属性，所以在上述循环中我们指定项目经验的id为key值。下面我们开始写新增事件和删除事件。
新增

    addNextExperience() {
            this.experienceId++
            this.experiences.push({id: this.experienceId, startDate: '', endDate: '', introduction: ''})
        }

删除

        removeExperience(index) {
            this.experiences = this.experiences.filter(function (experience) {
                return (index !== experience.id);
            })
        }

新增事件我使用了一个全局变量experienceId为id赋值，这个experienceId的值为多少合适呢。我们上面通过接口拿到了当前用户的工作经验值，每条工作经验都有一个id号，我首先想到的就是，在我新增时，这个id号的起始值应该为当前用户的工作经验的id号的最大值+1，这样做的原因是为了保证从后端接口取出的id号和我任意一条新增数据的id号都不会相同，这样一来，每一条工作经验的id号才不会出现重复的情况。