解决vue中模态框内数据和外面的数据绑定的问题

问题：表单中的用户名和模态框中的用户名没有绑定同一个model，但之后在模态框捏输入发现表单内的用户名也发生了改变。原本计划是想点保存之后再改变的。解决方法找到判断模态框是否显示的变量。之后用watch监听该属性。然后就不会发生上述问题。表单：<el-table :key='tableKey' :data="list" v-loading.body="l

快乐的大羊

4420人浏览 · 2018-03-27 08:45:44

快乐的大羊 · 2018-03-27 08:45:44 发布

问题：

表单中的用户名和模态框中的用户名没有绑定同一个model，但之后在模态框捏输入发现表单内的用户名也发生了改变。原本计划是想点保存之后再改变的。

解决方法

找到判断模态框是否显示的变量。之后用watch监听该属性。然后就不会发生上述问题。

表单：

 
  < 
  el-table 
  :key=' 
  tableKey' 
  :data=" 
  list" 
  v-loading.body=" 
  listLoading" 
  border 
  fit 
  highlight-current-row 
  > 
 
 
  < 
  el-table-column 
  prop= 
  "UserName" 
  align= 
  "center" 
  label= 
  "用户名" 
  > 
  </ 
  el-table-column 
  > 
 

模态框：

 
  < 
  el-dialog 
  :title=" 
  textMap[ 
  dialogStatus]" 
  :visible.sync=" 
  dialogFormVisible" 
  v-if=" 
  dialogStatus== 
  'update'" 
  > 
 
 
  < 
  el-form 
  > 
 
 
  < 
  el-form-item 
  label= 
  "用户名：" 
  :label-width=" 
  formLabelWidth" 
  > 
 
 
  < 
  el-input 
  v-model=" 
  form. 
  UserName" 
  auto-complete= 
  "off" 
  ></ 
  el-input 
  > 
 
 
  </ 
  el-form-item 
  > 
 

添加watch：

 
  watch: { 
 
  dialogFormVisible 
  : 
  function( 
  val, 
  oldVal) { 
 
  setTimeout(() 
  => { 
 
  this. 
  getList(); 
 
   }, 
  100); 
 
   }, 
 
   },

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^