Below is the Vue main file I'm working with:
export default {
name: 'app',
components: {
FormSelector,
},
data () {
return {
headerInfo: {
issue: '',
model: 'model-1'
}
}
},
mounted () {
this.headerInfo = JSON.parse(localStorage.getItem('header'))
},
methods: {
selectModel (model) {
this.headerInfo.model = model
},
}
}
Here's how I call the component within my code:
<FormSelector @select="selectModel" v-bind:model="headerInfo.model"/>
The script for the component looks like this:
export default {
name: 'FormSelector',
props: ['model'],
data () {
return {
select: this.model,
}
},
methods: {
changeModel (e) {
const model = (e.target.value)
this.$emit('select', model)
}
}
}
I'm wondering how to update the value of select data when the mounted cycle loads headerInfo data from localStorage.
Currently, only the headerInfo data in the main file gets changed and not the select data.