How to bind data received from store?

Question

Vue.js

Hello, I have such a task: I am making a page with profile settings.
There is a "Profile settings" block in which there are inputs, for example, let's take the "First name" and "Last name" fields.
In the store, I have an object that contains all the information I need about the authorized user.
I need to take this information from the store, create the corresponding fields in data, for example, firstName and lastName for binding with inputs.
The difficulty lies in displaying the current user data in these fields, while making a binding.

What I have:
- get the currentUser() in the computed properties by calling this.$store.getters.getCurrentUser
- a data object that has 2 fields created: firstName: "" and lastName: ""
- 2 inputs with v-model="firstName" and "lastName" respectively

Tried to set the value of this.currentUser.first_name from computed in data, but we don't have access to computed properties from data.

Answer 1

use get and set in computed st.
I think this will be what you need

computed: {
  fullName: {
    // геттер:
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // сеттер:
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}

Answer 2

Write an assignment to mounted(), and everything will be fine

Answer 3

mounted() {
    this.userName = this.currentUser.userName;
}