Javascript Vue:装入的更改值未传递到组件

这是我的Vue主文件：

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

这就是我对组件的称呼：

<FormSelector @select="selectModel" v-bind:model="headerInfo.model"/>

我的问题是：从localStorage装载循环加载

headerInfo

数据时，如何更改

选择

数据值

---

此时，只更改主文件上的headerInfo数据。

将

v-bind:model=“headerInfo.model

更改为

v-bind:model=“getModel“

其中

getModel

是返回

headerInfo.model

的getter。然后，只要

headerInfo

更改，就会触发getter来更新值。@vishal wadhwa所以，我需要调用内部的getter来mounted（）？为什么要等待

mounted

生命周期挂钩？您是否可以直接在

data（）

method.No中从本地存储返回结果。您不需要对装载的文件进行任何更改。一旦

headerInfo

在

mounted

中分配了一个新值，getter将自动触发，并更新

FormSelector

中的值。顺便说一句，它也在没有getter的情况下工作。

export default {
    name: 'FormSelector',
    props: ['model'],
    data () {
        return {
            select: this.model,
        }
    },
    methods: {
        changeModel (e) {
            const model = (e.target.value)
            this.$emit('select', model)
        }
    }
}