在 vue 中保存预填充的输入

Posted 2023-02-24

【中文标题】在 vue 中保存预填充的输入

【英文标题】：saving prefilled inputs in vue

【发布时间】：2018-03-19 10:27:03

【问题描述】：

我正在构建一个相当广泛的表单，并试图确保用户不会在简单的浏览器重新加载时丢失他们的数据。幸运的是，现在的浏览器在重新加载时会重新填充数据——事实上，v-model 的输入在beforeMount 期间有它。问题是，它们在mounted 上丢失了它，因为它们充满了来自相应模型的数据，这些数据相当合理，是空的。 现在，我想我可以用从 DOM 中提取的数据填充beforeMounted 上的模型——但是我能以某种方式从 DOM 中获取与对象挂钩的v-model 的引用吗？或者你有其他方法可以做到吗？

【参考方案1】：

假设您正在创建一个用户，因此您在组件中将用户模型定义为

data () 
  return 
    user: 
      email: '',
      password: ''
    
  

还有像<input type="email" v-model.lazy="user.email" /> 这样的输入元素（注意lazy 修饰符，例如，出于性能目的，我建议您使用它）。

现在，您可以为user 模型设置一个watcher，将其值存储在sessionStorage 中（我的选择，您可以改用localStorage）。 阅读文档：https://vuejs.org/v2/guide/computed.html#Watchers

在您的组件中：

watch: 
  user (newValues, oldValues) 
    window.sessionStorage.setItem('userData', JSON.stringify(newValues))
  

现在，请确保在安装组件之前加载值

created ()  // created hook
  let userData = window.sessionStorage.getItem('userData')

  if (userData) 
    try 
      userData = JSON.parse(userData)

      // now initiate the model
      this.user.email = userData.email
      this.user.password = userData.password
     catch (err) 
      // userData was not a valid json string
    
  

【讨论】：

这给了我一个在 vue 之外保存数据的想法。谢谢！

【参考方案2】：

好的，我真的很想为此利用浏览器的内置功能——尤其是通过这个简单的技巧，我可以在全局混合/插件中使用它，并且它与数据结构无关。我将所有需要的信息保存在 DOM 中，并在调用 mounted 后重新更新 DOM。

export default 
    beforeMount() 
        document.querySelectorAll('input').forEach((el) => 
            if (el.value) 
                el.setAttribute('data-prefill', el.value)
            
        )
    ,
    mounted() 
        this.$el.querySelectorAll('[data-prefill]').forEach((el) => 
            this.$nextTick(function() 
                el.value = el.getAttribute('data-prefill')
                el.dispatchEvent(new Event('change'))
                el.dispatchEvent(new Event('input'))
            )
        )
    

【讨论】：

关于这个的一些事情： 1）如果页面被刷新（F5），元素属性上设置的输入值不是持久的。 2) 使用条件渲染时，某些输入元素可能尚未渲染。 3) 由于 (2)，您现在依赖 dispatchEvent，应避免使用元素引用 (ref)。我强烈建议使用 watcher 方法，它也可以作为组件 mixin 来实现。