預渲染Vue.js表單

Question

我正在使用Vue.js文檔中建議的prerendering插件 。 當我使用網絡限制（Chrome devtools中的3G性能良好）時，我收到的HTML帶有預渲染的內容，然后是應用程序JS。 我有一些輸入是雙向數據綁定到組件數據（使用v模型）。

如果我的用戶在加載應用程序之前開始輸入內容，則在應用程序加載時，它將輸入綁定到數據，並將其默認值（''）放置在輸入中。 有什么辦法可以保留用戶的輸入？

Answer 1

我希望您可以使用refs來mounted它以拉取值，但是到那時看來綁定已經完成。

相反，您可以查看created或beforeMount DOM中的內容， beforeMount設置值。 下面的代碼段為您提供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>