vue修改标题功能如何传数据给后台

 1  模板

   
<template slot-scope="scope">
  <a @click="handleClick(scope.row.id)">{{scope.row.title}}</a>
</template>



//弹出框
 <el-dialog title="修改标题" :visible.sync="changeTitle" width="20%" @close="updateTitleClose">
      <el-input v-model="user.title" :value="user.title" placeholder="填写要修改的标题"></el-input>
      <!-- <input type="text" v-model="user.title" /> -->
      <span slot="footer">
        <el-button type="primary" @click="saveTitle">确定</el-button>
      </span>
    </el-dialog>

 2 数据

data(){
return {
   changeTitle: false;//修改标题弹出框显示隐藏
}

 3 传数据部分

//修改标题
async handleClick(id){
this.changeTitle = true;
this.user.taskId = id;
}



//保存标题
async saveTitle(){//不用传参数因为id已经从别的地方获取过this.user.taskId = id;

let params = { id: this.user.taskId, title: this.user.title };

if(this.user.title == "") return alert（"请输入标题");

let res = await updateTitle(param);//发送请求  把新题目和选中的标题发送给后台
if(res.code !== 200){
return this.$message.error("失败");
}
this.$message.success.(res.message);
this.getAllTask();//获取之后重新修改一遍  因为数据发生了更新
this.changeTitle = false;
},

updateTitleClose(){//确定后标题置空
this.user.title="";
},

 

效果图