V-model 与 disabled

input输入框绑定了v-model,因为业务需求可能会设置disabled。
现在碰到一种情况,设置了disabled就是不想让用户输入,但是如果是同行,知道如何移除disabled,移除后v-model仍旧是生效的,意味着用户可能非法修改值。
不知哪位大佬有好的解决方法,比如设置了disabled,v-model只能单向绑定?

哪位大佬知道。。。。。

为了达到你说的防止同行篡改属性的提交,因为最终这个input是为了提交数据的,所以在提交的时候判断一下,阻止就可以了。我一般是把disabled属性值用一个组件实例property来绑定。比如data中添加一个property:
data(){
return {
inputModel:’’,
isDisabled:true
}
}

input标签中:

<input type="text" v-model="inputModel" :disabled="isDisabled?'':undefined">

这样,当isDisabled为ture的时候input就会禁用,我们在提交表单的方法中,首先判断一下isDisabled,如果为ture的话禁止提交(不管别人是否修改disabled属性,总之不让他成功提交数据就ok了)

你可以把一个计算属性关联到 v-model 指令上,利用自定义 Setter 实现需求:

<input v-model="something">
const realthing = ref('whatever')

const something = computed({
  get: () => realthing.value,
  set: value => {
    if (value === 'whatelse') {
      realthing.value = value
    }
  },
})

当然理论上,如果那个同行够专业,这样也防不住(毕竟 JS)。所以合法性校验需要在后端也实现一份儿。

分离value属性和input事件,disabled的时候不响应input事件,输入了也不会改变内存中的值,ajax提交就不会受影响了