Question

我构建了一个相当广泛的表单，并且我试图确保用户在简单的浏览器重新加载时不会丢失数据。幸运的是，浏览器现在重新加载重新加载的数据 - 事实上，object[,] Product = { { 123, "Tea" }, { 234, "Coffee" }, { 345, "Drinks" } }; // from MySql object[,] ProductDetails = { { 123, "T", 23.00 }, { 234, "C", 25.02 }, { 345, "D", 11.88 } }; for (int k = 0; k < ProductDetails.GetLength(0); k++) { object id = ProductDetails[k, 0]; string longName = null; bool idFound = false; for (int l = 0; l < Product.GetLength(0); l++) { if (id.Equals(Product[l, 0])) // Equals necessary because boxing of int to object { idFound = true; longName = Product[l, 1] as string; break; } } if (idFound) { ProductDetails[k, 1] = longName; } }的输入在v-model期间有。问题是，他们在beforeMount上丢失了它，因为它们充满了来自相应模型的数据，这是合理的，空的。现在，我想我可以使用从DOM中提取的数据填充mounted上的模型 - 但是我能以某种方式获得从DOM挂接到对象的beforeMounted的引用吗？或者也许还有其他方法可以做到吗？

Answer 1

假设您正在创建用户，因此您在组件中定义了用户模型

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

您的输入元素如<input type="email" v-model.lazy="user.email" />（请注意lazy修饰符，对于我的示例，我建议您使用它，以达到性能目的。）

现在，您可以为user模型设置一个观察者，将其值存储在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

好的，我真的想利用浏览器内置功能 - 特别是通过这个简单的技巧，我可以在全局mixin /插件中使用它，并且它的数据结构不可知。我在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'))
            })
        })
    }

在vue中保存预填充输入

2 个答案: