How to set data properties to value returned from Vuex getter

Question

I have a Vue component that will display data depending on what the user previously clicked on in a previous component. When they originally click, I set the 'current' index. Then when they get to the next page, I have a getter that will look in the data array and return the 'current' data.

The component they are redirected to is a form that they can edit. I would like to be able to have the 'current' data be pre-populated. NOT as a placeholder but as the actual value so that they can edit it directly.

The issue is I don't know how to set the values returned from the getter to the data function values so that they can be bound with v-model.

HTML

<input type="text" class="form-control" id="nickname1" v-model="name" name="name">
<input type="text" class="form-control" id="address1" placeholder="" v-model="address" name="address" > 
<input type="text" class="form-control" id="city1" placeholder="" v-model="city" name="city" > 

VUE

data: function() {
    return {
        name: this.currentArea.title,
        address: this.currentArea.address,
        city: this.currentArea.city,
        state: this.currentArea.state
    }
},
computed: {
    currentArea() { return this.$store.getters.currentArea }
}

*this.currentArea.title and currentArea.title do not work.

*if I bind the placeholder, the data displays correctly, so the getter function is returning currentArea correctly

Answer 1

The data method is only fired once during initialization, before the computed properties are set up. So, referencing currentArea from within the data method won't work as it will be undefined at the time of execution.

If this.$store.getters.currentArea isn't expected to change in the lifespan of this component, it would be simplest to just set the data properties once in the mounted hook:

data() {
  return {
    name: '',
    address: '',
    city: '',
    state: ''
  }
},
mounted() {
  let area = this.$store.getters.currentArea;
  this.name = area.name;
  this.address = area.address;
  this.city = area.city;
  this.state = area.state;       
} 

---

Or, if you know that the data properties for this component will always be the same as the currentArea, you could simply return this.$store.getters.currentArea in the data method directly:

data() {
  return this.$store.getters.currentArea;
}