在 vue 中保存预填充的输入

Question

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

Answer 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
    }
  }
}

Answer 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'))
            })
        })
    }