Question

我正在使用Vue.js文档中建议的prerendering plugin。当我使用网络限制（chrome devtools中的3G）时，我收到了带有预呈现内容的html，然后是应用程序JS。我有一些输入是双向数据绑定到组件数据（使用v模型）。

如果我的用户在加载应用程序之前开始输入，则当应用程序加载时，它会将输入绑定到数据并将其默认值（''）放在输入中。有没有办法保持用户输入？

Answer 1

我希望你能在mounted中使用refs来提取值，但似乎绑定已经完成了。

相反，您可以在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>

预呈现Vue.js形式

1 个答案: