Vue.js实现编辑用户记录时username只读、注册时可编辑的方法

你这实现错在两点：

• 没做场景区分，不管是编辑老数据还是新注册，都走同一套字段配置，状态直接写死
• readonly属性没做动态绑定，写死在标签上的话，要么所有场景只读，要么所有场景可编辑，根本做不到差异化

具体改法 #

1. 先加场景标记 #

组件里先定义个布尔值标记当前是编辑还是注册，页面初始化的时候根据路由/是否存在已有用户数据给这个标记赋值：

// 选项式API写法示例
data() {
  return {
    isEdit: false, // 默认是注册场景，进编辑页就改成true
    form: {
      username: '',
      // 其他表单项
    }
  }
},
created() {
  // 常规判断逻辑：路由带用户id就说明是编辑页
  const userId = this.$route.params.id || this.$route.query.userId
  if (userId) {
    this.isEdit = true
    // 这里调接口拉取已有的用户信息，填到form里
  }
}

用组合式API的话就用ref定义isEdit，在onMounted里做判断就行，逻辑完全一样。

2. 动态绑定只读属性 #

不要在input上硬写readonly，用Vue的动态绑定语法把属性值和前面的场景标记绑死：

<!-- 原生输入框写法 -->
<input
  type="text"
  v-model="form.username"
  :readonly="isEdit"
  placeholder="请输入用户名"
>

要是用Element Plus、AntD Vue这类组件库，逻辑一模一样，给组件的readonly prop传动态值就行，比如Element Plus的输入框：

<el-input
  v-model="form.username"
  :readonly="isEdit"
  placeholder="请输入用户名"
/>

想让只读状态视觉上更明显，可以加个全局样式：

input[readonly] {
  background: #f5f7fa;
  cursor: not-allowed;
}

3. 别漏了安全校验 #

前端只读只是交互层面的限制，防不住抓包改参数：

• 编辑场景提交表单的时候，直接把username字段从提交参数里删掉，别传给后端
• 后端对应的编辑接口也要做拦截，禁止修改username字段，别全信前端传的内容

你贴的当前实现截图：

内容的提问来源于stack exchange，提问作者Merve