要解决编辑时VueJs文本区域不显示存储的信息的问题,可以使用v-model指令来绑定textarea元素的值,并使用computed属性来动态获取和设置textarea的值。
以下是一个示例代码:
HTML模板:
Vue实例:
new Vue({
el: '#app',
data() {
return {
text: '', // 存储文本内容的变量
};
},
created() {
// 在页面加载时从存储中获取文本内容,并设置到text变量中
this.text = localStorage.getItem('savedText') || '';
},
computed: {
// 监听text变量的变化,每次变化都将内容保存到存储中
saveToStorage() {
localStorage.setItem('savedText', this.text);
},
},
methods: {
// 点击保存按钮时调用,将内容保存到存储中
saveText() {
this.saveToStorage();
},
},
});
在上面的示例中,textarea元素通过v-model指令绑定到Vue实例的text属性上,所以当text属性的值发生变化时,textarea的值也会随之改变。
在Vue实例的created生命周期钩子中,我们从存储中获取文本内容,并将其设置到text变量中。
通过computed属性,我们监听text变量的变化,并将其保存到存储中。
最后,在saveText方法中,我们调用saveToStorage方法来保存文本内容到存储中。
这样,每次编辑时,textarea都会显示之前存储的文本内容。
上一篇:编辑时,上传控件返回null。
下一篇:编辑Shopify的管理员面板