在 Vue.js 中如何将输入保存到本地存储中的输入答案

【问题标题】：How in Vue.js save input to input in localstorage在 Vue.js 中如何将输入保存到本地存储中的输入
【发布时间】：2019-04-09 19:27:10
【问题描述】：

例如，我从 Vue.js 官方网站做所有事情。但我需要使用框架 7。在输入中我显示了 [object InputEvent]。而当我尝试写一些文字时也会显示[object InputEvent]。

如何在本地存储中保存名称并在输入中显示回来？

框架 7 中的 PS v-model 不起作用

  <f7-list form>
    <f7-list-input
      label="Username"
      name="username"
      placeholder="Username"
      type="text"
      v-bind:value="name"
      required validate
      pattern="[3-9a-zA-Zа-яА-ЯёЁ]+"
      @input="persist"
    />
  </f7-list>

<script>
export default {
data() {
    return{
        name: '',
        }
    },
mounted() {
  if (localStorage.name) {
    this.name = localStorage.name;
  }
},
methods: {
        persist(){
            name=$event.target.value;
        localStorage.name = this.name;

    }
}
};
</script>

that's what output to input

【问题讨论】：

你的脚本脚本标签中有一个错字，你也应该看看：persist vs pArsist，但答案应该是正确的
我修好了，还是不行

标签： javascript vue.js html-framework-7

【解决方案1】：

使用适当的本地存储方法更新代码并删除导致问题的行

替换

name=$event.target.value;

与

this.name = $event.target.value;

请在下面找到包含更新方法和重构代码的更新代码。

 <f7-list form>
        <f7-list-input
          label="Username"
          name="username"
          placeholder="Username"
          type="text"
          v-bind:value="name"
          required validate
          pattern="[3-9a-zA-Zа-яА-ЯёЁ]+"
          @input="persist"
        />
      </f7-list>

    <script>
    export default {
    data() {
        return{
            name: '',
            }
        },
    mounted() {
      if (localStorage.name) {
    //retrive name from localstorage here.
        this.name = localStorage.getItem('name')
      }
    },


     methods: {


                 persist(){
           /* set name to localstorage here
  using setItem is recommended  way of doing but even without that yourcode should work.*/
                    localStorage.setItem('name', $event.target.value)

            }
        }
        };
        </script>

【讨论】：

[object InputEvent] 存在同样的问题。控制台错误 --> [Vue 警告]：v-on 处理程序中的错误：在 ---> 中找到“ReferenceError: $event is not defined”在 src/pages/login.vue 在 src/app.vue vue.esm.js:629:7
将其添加到persist中，现在一切正常 this.name = event.target.value;

【解决方案2】：

简单地说：

localStorage.setItem('name', this.name)

this.name = localStorage.getItem('name')

【讨论】：

我做对了吗？方法： { parsist(){ localStorage.setItem(key, this.name); this.name = localStorage.getItem(key); } }
@Dio 那些在单独的函数中
你能举个例子吗？