javascript - 预渲染 Vue.js 表单

Question

我正在使用prerendering plugin Vue.js 文档中建议。当我使用网络节流(chrome devtools 中的良好 3G)时，我收到带有预渲染内容的 html，然后收到应用程序 JS。我有一些输入是双向数据绑定(bind)到组件数据(使用 v-model)。

如果我的用户在加载应用程序之前开始输入，则当应用程序加载时，它会将输入绑定(bind)到数据并将其默认值 ('') 放入输入中。有什么办法可以保留用户输入吗？

Answer 1

我希望您可以在 mounted 中使用 refs 来提取值，但那时绑定(bind)似乎已经完成。

相反，您可以在 created 或 beforeMount 中查看 DOM 中的内容，并从那里设置值。下面的代码片段让您在安装前有 4 秒钟的时间来输入。

setTimeout(() => {
  new Vue({
    el: '#app',
    data: {
      foo: null
    },
    created() {
      this.foo = document.querySelector('#app [v-model="foo"]').value;
    }
  });
}, 4000);

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.6/vue.min.js"></script>
<div id="app">
  <input v-model="foo" />
  {{foo}}
</div>