如何在 Vuejs 中设置刷新时的旧输入值答案

【问题标题】：how can i set old input value on refresh in Vuejs如何在 Vuejs 中设置刷新时的旧输入值
【发布时间】：2017-12-29 10:59:47
【问题描述】：

我使用 laravel 和 Vuejs

如何在 vue 动态组件中设置刷新或返回页面时输入的旧值

类似这样的：

value="{{ old('name') }}

【问题讨论】：

你的意思是，你想在页面刷新时重置你的输入值。一个例子或重现的方法会很有帮助。
不不。想象一下，我有一个 vue 组件，它有一些输入，用户将单击（下一步），并且会出现另一个组件，当用户在浏览器中单击返回时，输入是明确的，我希望它具有它们的旧值
示例：输入元素状态从 initial_val -> temp_val -> new_val 更改，然后您进行刷新。现在，应该将 Input 元素设置为 initial_val 吗？

【解决方案1】：

在你的刀片文件中，创建一个新的脚本标签：

<script>
var oldFormData = {
  name: "{{ old('name') }}",
  //...
}
</script>

然后在你的组件中created回调。

created() {
  this.name = oldFormData.name // This should get {{ old('name') }} value
}

您也可以通过 Vue 组件 props 传递旧数据。

假设您的组件是my-form，那么它在您的刀片文件中应该如下所示：

<my-form :oldData="{name: '{{ old('name') }}'}"></my-form>

然后在created:

props: ['oldData'],
created() {
  this.name = this.oldData.name
}

【讨论】：