CODEWITHSUNDEEP
javascriptvue.js
pcavalet
pcavalet

Reputation: 121

Prerendering Vue.js form

I'm using the prerendering plugin suggested in the Vue.js documentation. When I am using a network throttling (good 3G in chrome devtools), I'm receiving my html with the prerendered content and then the app JS. I have some inputs that are two-way data-binded to components data (with v-model).

If my user starts typing before the app is loaded, when the app loads, it binds the input to the data and place its default value ('') in the input. Is there any way to keep the user inputs ?

Upvotes: 0

Views: 83

Answers (1)

Roy J
Roy J

Reputation: 43881

I was hoping you could do it in mounted using refs to pull the value, but it seems the binding is already done by then.

Instead, you can look at what's in the DOM in created or beforeMount and set the value from there. The snippet below gives you 4 seconds to type before mounting.

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>

Upvotes: 1

Related Questions