使用vue.js存儲對象的元素

Question

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

    }

我有一個用戶窗體，對於每個條目，都會彈出一個模態，並且需要用戶填寫，然后通過按下完成按鈕，模態會關閉，並調用特定的函數（即saveUserName（）），該模態，並將其設置為會話存儲。 所以我想知道如何按時間填充用戶對象，並將這些值設置到會話存儲中？ 到目前為止，第一個值被重置，第二個值被接管，在我的情況下，我的用戶對象具有userName或userAge。 我所期望的（在我的會話存儲不為空的情況下）來自日志beforeMount是用戶：{userName：“ Mario”，userAge：27}謝謝

Answer 1

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