Vue 数据绑定失败问题

Vue 通过对数据的操作改变html 的 dom 显示，使得前端开发聚焦于对数据的逻辑的操作。

昨天遇到一个问题：设置一个数组变量，通过 http 请求后端，循环遍历获取数据，期望可以实现数据改变后自动渲染到 dom，但结果是数据时有时无，代码如下：

<select class="select select-middle" v-model="val">
    <option v-for="(v, k) in box" :key="bkey" :value="v.val">{
   
   { v.name }}</option>
</select>

export default {
     data () {
        box: [],
        val: ""
     },
     method: {
        getData: function() {
            this.api.dataList().then(res => {
                var list = res.data
                for (var o in list) {
                    if (list[o].status == 1) {
                        this.box[o] = {"val": list[o].val, "name": list[o].name}
                    }
                }
            }).catch(err => {
                console.error('请求失败：', err);
            })
        }
     }
}

以上代码运行的结果是，刷新网页，select 列表数据时有时无。

这个问题昨晚上一直怀疑是数据加载延迟导致页面先用空数组渲染了 dom 结构，然后 http 请求回来处理后的数据就没有渲染上去，按照这个思路在各种生命周期里添加方法调用，搞了一个多小时都没用，无奈回家睡觉。

今天回来重新看这个代码，突然发现，我在 http 请求获取数据后，直接修改的是已赋值成功的 box 空数组内容，但 box 这个变量并没有重新赋值，这个变量对于 vue 来说，并没有发生改变，所以并不会将直接新增的数据重新渲染到 dom 上，按照这个思路修改如下：

<select class="select select-middle" v-model="val">
    <option v-for="(v, k) in box" :key="bkey" :value="v.val">{
   
   { v.name }}</option>
</select>

export default {
     data () {
        box: [],
        val: ""
     },
     method: {
        getData: function() {
            this.api.dataList().then(res => {
                var list = res.data
                var box  = []
                for (var o in list) {
                    if (list[o].status == 1) {
                        box[o] = {"val": list[o].val, "name": list[o].name}
                    }
                }
                this.box = box    // 重点：重新给 box 数组赋值
            }).catch(err => {
                console.error('请求失败：', err);
            })
        }
     }
}

如上修改后，http 请求回来的数据可以 100% 绑定到 dom 结构中，谨记！

Vue 数据绑定失败问题

猜你喜欢