我所做的一切都来自官方 Vue.js 网站。但我需要使用框架7。并且在输入中我显示了[object InputEvent]。当我尝试编写一些文本时,也会显示 [object InputEvent]。
如何将名称保存在本地存储中并将其显示回输入中?
PS v-model 在框架 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>
最佳答案
使用本地存储的正确方法更新了代码,并删除了导致问题的行
替换
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>
关于javascript - Vue.js 中如何将输入保存到本地存储中的输入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55599932/