例如,我可以通过Vue.js官方网站进行所有操作。但是我需要使用框架7。在输入中显示[object InputEvent]。当我尝试写一些文本时,也会显示[object InputEvent]。
如何在本地存储中保存名称并在输入中显示它?
框架7中的PS v模型不起作用
<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>
答案 0 :(得分:1)
简单地:
localStorage.setItem('name', this.name)
this.name = localStorage.getItem('name')
答案 1 :(得分: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>