How in Vue.js save input to input in localstorage

Question

I do everything for example from the official Vue.js site. But I need to use framework 7. And in input i displayed [object InputEvent]. And when I try to write some text is also displayed [object InputEvent].

How to save a name in localstorage and display it back in input?

PS v-model in framework 7 does not work

  <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

There's a typo in your script script tag that you should look at as well: persist vs pArsist, but the answer should be correct — jayands
– jayands, Commented Apr 9, 2019 at 19:34

Manoj · Accepted Answer · 2019-04-09 19:58:57Z

1

Updated code with proper methods of localstorage and removed a line which was cause for your issue

replace

name=$event.target.value;

with

this.name = $event.target.value;

Please find below updated code with updated methods and refactored code.

 <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>

edited Apr 9, 2019 at 19:58

answered Apr 9, 2019 at 19:52

Manoj

1,2058 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Dio Over a year ago

Same problem with [object InputEvent]. Console error --> [Vue warn]: Error in v-on handler: "ReferenceError: $event is not defined" found in ---> <F7ListInput> <F7List> <F7PageContent> <F7Page> <F7View> <Login> at src/pages/login.vue <F7View> <F7App> <App> at src/app.vue <Root> vue.esm.js:629:7

Dio Over a year ago

Add this in persist and all works now this.name = event.target.value;

strblr · Accepted Answer · 2019-04-09 19:31:39Z

1

Simply :

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

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

answered Apr 9, 2019 at 19:31

strblr

99017 silver badges41 bronze badges

3 Comments

Dio Over a year ago

Did I do right? methods: { parsist(){ localStorage.setItem(key, this.name); this.name = localStorage.getItem(key); } }

jayands Over a year ago

@Dio those go in the separate functions

Dio Over a year ago

Can you please do an example how it should be.

Collectives™ on Stack Overflow

How in Vue.js save input to input in localstorage

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related