v-model绑定的数据 初始化之后 能不能给他赋给一个别的变量 不让他随着页面的值变更而变更?

v-model绑定的数据 初始化之后 能不能给他赋给一个别的变量 不让他随着页面的值变更而变更?

阅读 1.6k
5 个回答

对这个数据加个watch,再给设回去

一个输入框:

htmlCopy code
<input type="text" v-model="message">

你可以把 message 的初始值保存到另一个变量中:

data() {
  return {
    message: 'Hello world!',
    originalMessage: 'Hello world!'
  }
}

现在 originalMessage 中包含 message 的初始值。如果用户更改了输入框中的值,message 将随之更新,但 originalMessage 的值不会受到影响

console.log(this.message)         // 输出用户在输入框中输入的值
console.log(this.originalMessage) // 输出初始值

但是方法只适用于基本数据类型(如字符串、数字、布尔值等)。如果 message 是一个对象或数组,那么就需要使用深拷贝来保存初始值,以确保它不受页面值的影响

不需要 v-model 绑定的变量随着页面的值变更而变更,那么应该要考虑这个场景是不是根本不需要 v-model 来实现,并不是要局限于一定要用 v-model。

本文参与了SegmentFault 思否面试闯关挑战赛,欢迎正在阅读的你也加入。

v-model:value='xxx'改成:value='xxx'就好了

@熊的猫 说的没错,如果你只是希望初始值是prop,内部修改时不影响父组件的prop,那你就应该在子组件里定义一个data,初始值为该prop,父组件用了v-model就意味着会改动,不要做反人类的事

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏