Как в Vue.js сохранить вход для ввода в localalstorage - PullRequest
Новая
       17

Как в Vue.js сохранить вход для ввода в localalstorage

0 голосов
/ 09 апреля 2019

Я делаю все, например, с официального сайта Vue.js. Но мне нужно использовать фреймворк 7. И во входных данных я отобразил [объект InputEvent]. И когда я пытаюсь написать какой-то текст, также отображается [объект InputEvent].

Как сохранить имя в localalstorage и отобразить его обратно во вводе?

PS v-модель в фреймворке 7 не работает 

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

вот что выводит на вход

Ответы [ 2 ]

1 голос
/ 09 апреля 2019

Обновлен код с правильными методами localstorage и удалена строка, которая стала причиной вашей проблемы

замена

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>
1 голос
/ 09 апреля 2019

Просто: 

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

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