vue简易留言板

功能难点

编辑修改某一条留言，同时将修改后的内容发送给后台，并将最新的数据展示在数据列表中。
要想做到修改后数据同步，需要用到v-model，表单文本元素，这儿用的是textarea，默认是隐藏的，当点击编辑的时候，让原本的显示内容的div隐藏，textarea显示，且让v-model=‘aaa’ 的 aaa = item.bbb（给textarea v-model 绑定的数据赋值），但是会发现一个问题，所有的数据都变成了显示textarea的样子。而我们想要的是，点击编辑谁，谁就显示textarea（编辑状态）。

解决办法

当我们打开这个页面时，会调一个list接口，拿到所有的数据，保证如果数据库有数据，就渲染，没有就显示暂无数据。在我们拿到数据数组时，循环数组，给每一条数据加一个 isedit属性 为false，当点编辑时，让这一条数据的isedit = true，且让textarea的显示 由 item.isedit 来决定，这样就解决了。

页面图片

1. 没有发表留言
   
2. 发表留言
   
3. 编辑修改留言
   
4. 编辑保存留言

实现代码

 <div v-show="projectmemoData.length==0" class="nolist">暂无数据...</div>
     <div class="txtprojectmemo">
        <Input v-model="projectmemo" placeholder="请输入" style="width: 95%;"></Input>
    	<div>
     		<Button type="primary" class="pull-right" @click="saveProjectMemo">
         		<Icon type="plus-round"></Icon>
    		</Button>
       	</div>
  	  </div>
      <div class="projectlistbox">
        <div class="projectlist" v-for="(item,index) in projectmemoData" :key="index">
         	<div style="font-size:12px;font-weight:bold;"><span>{{item.createby}}</span>&nbsp;&nbsp;<span>{{item.createdate}}</span></div>
            <div v-show="!item.isedit">{{item.projectmemo}}</div>
            <div v-show="item.isedit">
                <Input type="textarea" :rows="3" v-model="projectmemoedit" placeholder="请输入"></Input>
            </div>
            <div class="createby-createdate">
            <div></div>
              	<div>
                   	<span v-show="!item.isedit" @click="editProjectMemo(item)" class="edit-delete-save">编辑</span>
                    <span v-show="!item.isedit" @click="deleteProjectMemo(item)" class="edit-delete-save">删除</span>
                   	<span v-show="item.isedit" @click="saveeditProjectMemo(item)" class="edit-delete-save">保存</span>
               	</div>
         </div>
      </div>
 </div>

// 项目留言板
           getProjectMemolist(aaa) {
                var params = {
                    projectid: aaa
                };
                ProjectMemolist(params).then(res => {
                    if (res.data.flag == 1) {
                        if (res.data.success == 1) {
                            this.projectmemoData = res.data.data;
                            this.projectmemoData.forEach(item => {
                                item.isedit = false;
                            })
                        } else {
                            popup.alert(this, "error", res.data.err.msg);
                        }
                    }
                });
            },
            // 发布
            saveProjectMemo() {
                var params = {
                    projectmemo: this.projectmemo,
                    projectid: this.projectid
                };
                saveProjectMemo(params).then(res => {
                    if (res.data.flag == 1) {
                        if (res.data.success == 1) {
                            this.projectmemo = '';
                            this.getProjectMemolist(this.projectid);
                            popup.alert(this, "success", "保存成功");
                        } else {
                            popup.alert(this, "error", res.data.err.msg);
                        }
                    }
                });
            },
            //编辑
            editProjectMemo(obj) {
                this.projectmemoedit = obj.projectmemo;
                obj.isedit = true;
            },
            saveeditProjectMemo(obj) {
                obj.isedit = false;
                var params = {
                    projectmemoid: obj.projectmemoid,
                    projectmemo: this.projectmemoedit
                }
                saveProjectMemo(params).then(res => {
                    if (res.data.flag == 1) {
                        if (res.data.success == 1) {
                            this.getProjectMemolist(this.projectid);
                            popup.alert(this, "success", "保存成功");
                        } else {
                            popup.alert(this, "error", res.data.err.msg);
                        }
                    }
                });
            },
            //删除
            deleteProjectMemo(obj) {
                var params = {
                    projectmemoid: obj.projectmemoid
                }
                delProjectMemo(params).then(res => {
                    if (res.data.flag == 1) {
                        if (res.data.success == 1) {
                            this.getProjectMemolist(this.projectid);
                            popup.alert(this, "success", "删除成功");
                        } else {
                            popup.alert(this, "error", res.data.err.msg);
                        }
                    }
                });
            }