对于一个刚毕业的后端开发者，开始总以为后端开发只做后端，谁知第一个月工作内容大部分都是前端，天真，只能说天真。

才入前端，坑真的很多，简单的样式倒是很好解决，遇到稍微棘手点问题还是挺浪费时间的，这两天就遇到一个VUE修改select option绑定的数组对象却无法及时刷新页面数据问题，整整浪费了一早上的时间，这里简单做下记录。

html页面代码如下：

<el-select v-model="searchData.id" clearable placeholder="请选择" @change="currentSelVenderId">
    <el-option
            v-for="direction in formData.accountIdDict"
            :key="direction.value"
            :label="direction.name"
            :value="direction.value">
    </el-option>
</el-select>

js中代码如下：

data: function () {
    return {
        formData:{
            dateRange: [],
            feeTypeDict:[],
            accountIdDict:[]
        }
    };
},
methods: {
    loadFeeTypes() {
        this.$axios.post(`/data/invoice/getInvoiceConfigAndBalance`).then((response) => {
        if (response.data.success) {
            var configs = response.data.itemList;
            if (configs != null && configs != "null" && configs.length > 0) {
                for (var i = 0; i < configs.length; i++) {
                    var fee = configs[i].split("_");
                    var item = {
                        feeType:'',
                        feeName:''
                    };
                    item.feeType = fee[0]+"_"+fee[1];
                    item.feeName = fee[2];
                    this.formData.feeTypeDict[i] = item;
                }
            }
        } else {
            this.$message({
                showClose: true,
                message: '查询失败！',
                type: 'error'
            });
        }
        })
    }
}

代码如上，select option绑定js中的formData.accountIdDict:[]数组，通过loadFeeTypes()方法获取数据并给formData.accountIdDict赋值，就如上代码，开始怎么看都没有问题，但是不管怎样页面都无法及时响应数据。最后发现是指针问题。
为题在于给对象赋值的时候，对于VUE，当页面上绑定的值发生改变的时候会及时刷新页面数据，但是对于以上赋值代码：

for (var i = 0; i < configs.length; i++) {
    var fee = configs[i].split("_");
    var item = {
        feeType:'',
        feeName:''
    };
    item.feeType = fee[0]+"_"+fee[1];
    item.feeName = fee[2];
    this.formData.feeTypeDict[i] = item;
}

虽然给formData.feeTypeDict数据中各个位置赋值了，但是formData.feeTypeDict还是指向原来的数组地址，只是数组的内容发生了变化，所以formData.feeTypeDict的值并没有变，所以页面没有监听到formData.feeTypeDict值发生变化，也就为什么没有及时刷新页面数据。定位到问题后，修改代码如下：

var a = [];
for (var i = 0; i < configs.length; i++) {
    var fee = configs[i].split("_");
    var item = {
        feeType:'',
        feeName:''
    };
    item.feeType = fee[0]+"_"+fee[1];
    item.feeName = fee[2];
    a[i] = item;
}
this.formData.feeTypeDict = a;

这样，每次加载数据就没问题了。
好了，问题解决了，终于可以安心的进行下一步了，直接感动到哭。