Vue2.x 使用数组成员绑定数据的坑

问题：使用数组成员，导致数组更新的时候无法渲染。

<el-table-column
    prop="thisChanging"
    :label="tableTitleName[1]"  这里使用了data里面的数组下标
    align="center">
</el-table-column>

<script>
export default{
   data(){
    return {
        tableTitleName: [],
    }
  }
}
</script>

这样写，导致更新tableTitleName的时候，无法更新label，怀疑vue绑定了tableTitleName[]成员的值，不是地址，不管怎么更新都不会改变。

解决方案1：

{
    tableTitleName: null
}

将这个定义为null，然后在初始化的时候将数据深拷贝给该对象。

解决方案2：

<el-table-column
    prop="thisChanging"
    :label="tableTitleName.slice(0,1).toString()"
    align="center">
</el-table-column>

用方法进行切割

总结

推荐方法2，估计vue很多都要靠方法来获取值才能刷新。