代码之家 › 专栏 › 技术社区 › heyr

使用存储对象的元素vue.js版

session-storage vue.js javascript

heyr · 技术社区 · 6 年前

    data() {
        return: {
          user: {},
          userName: "",
          userAge: ""
    }
  },

methods: {

    saveUserName: function() {
          this.userName = this.newUserName;
          this.$refs.userNameModal.hideModal();
          this.$session.set('userDetails', {userName: this.userName});
        },

    saveUserAge: function() {
          this.userAge = this.newUserAge;
          this.$refs.userAgeModal.hideModal();
          this.$session.set('userDetails', {userAge: this.userAge});
        },

    },

    beforeMount: function() {
    if (this.$session.exists('userDetails')) {

          this.user = this.$session.get('userDetails');
          console.log("userDetails", this.user)
        }

    }

我有一个用户窗体,对于每个条目,都会弹出一个模态,用户需要填写,然后按一个done按钮,模式关闭,调用一个特定的函数(即saveUserName()),该函数是模式,并将其设置为会话存储。现在,第一个值被重置,第二个值接管,在我的例子中,我的user对象有userName或userAge。谢谢

1 回复 | 直到 5 年前

gleam 6 年前

data() {
  return {
    user: {
      userName: "",
      userAge: ""
    },
  };
},

methods: {
  saveUserName: function() {
    this.user.userName = this.newUserName;
    this.$refs.userNameModal.hideModal();
    this.saveUser();
  },

  saveUserAge: function() {
    this.user.userAge = this.newUserAge;
    this.$refs.userAgeModal.hideModal();
    this.saveUser();
  },

  saveUser: function() {
    this.$session.set('userDetails', this.user);
  },
},

beforeMount: function() {
  if (this.$session.exists('userDetails')) {
    this.user = this.$session.get('userDetails');
    console.log("userDetails", this.user)
  }
}

推荐文章

StuP · 响应式Vue组件在数据更改时不更新

2 年前

dbzx10299 · 对从Api端点返回的数据使用Vue转换组

2 年前

mrDandaleonx · Vue3获取div内容并将其发布到表单

2 年前

ateymour · Vue3在异步调用后将道具传递给子组件

2 年前

Artur Müller Romanov · 是否可以有条件地渲染布局?

2 年前

Ilijanovic · 对象可能未定义

2 年前

devAR · 单击其他组件时,单选按钮未保持选中状态

2 年前

Coderama · 在v-for指令中使用:key属性时,TS应出现类型错误

2 年前

Suffii · Vue表单输入绑定的条件绑定存在问题

2 年前

akkonrad · 函数的作用是:返回数据属性为空的实例

2 年前