前端学习日记12.2

 1.在使用element-ui的检验表单时加入日期时间选择器，如果初始化的与其绑定的时间数据为空字符串，则有可能遇到[Vue warn]：Error in v-on handler: "TypeError: a.getTime is not a function"

<template>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
        <el-form-item label="活动时间" prop="date">
          <div class="block">
            <span class="demonstration">默认</span>
            <el-date-picker
              v-model="value1"
              type="datetime"
              placeholder="选择日期时间">
            </el-date-picker>
          </div>
        </el-form-item>
    </el-form>
</template>

<script>
export default: {
    data() {
        return {
            value1: '',
            ruleForm: {
                // 其余表单校验属性略
                date1,  
            },
            rules: {
                // 其余表单属性校验规则略
              date1: [
                { type: 'date', required: true, message: '选择日期', trigger: 'change' }
              ],
            }
        }
    },
}
</script>

原因是由于我们所规定的value1类型为String，故在选择完日期后会变为字符串格式，与其校验的 'date'类型有冲突，删除对应rules的type: 'date'即可解决。

2.常用深拷贝，简单一行写法：

this.tableData = JSON.parse(JSON.stringify(res))

3.一般后端接口默认的格式要求都为JSON格式，使用包装好的getJSON或者postJSON请求，如果接口文档在请求后写明了要form-data格式，应该将postJSON改为post请求。两者区别：

JSON格式：'{ 'key1': 'value1', 'key2': 'value2' }'

Form-data格式：'key1=value1&key2=value2'

具体的区别参考：formdata和json

4.遇到的新问题[Vue warn]：Error in render: “TypeError: Cannot read property ‘fakeVoteCount’ of undefined”，情况简单描述：

<template>
    <el-table :data="tableData" border>
        // 其余el-table-column略
        <el-table-column label="调整" v-if="hasAuth" align="center">
             <template slot-scope="scope">
                  <el-input
                       v-model="adjustmentData[scope.$index].fakeVoteCount"         
                       @change="adjust(scope.row, scope.$index)"
                  ></el-input>
             </template>
        </el-table-column>
    </el-table>
</template>

export default {
    data() {
        return {
            tableData: [],
            adjustmentData: [],
        }
    },
    activated() {
        this.search()
    }，
    methods: {
        search() {
            // 做一些请求，将返回数据全部赋值给tableData同时对adjustment进行部分赋值
        },
        hasAuth() { 
        // 判断用户权限
        }
    }
}

虽然报错，但是不影响页面的功能，用debugger断点测试后发现，在data()初始化结束后，在请求返回数据前就进行了报错，所以这是由于data初始化后我的adjustmentData还为空数组并没有我在input输入框所期望绑定的fakeVoteCount造成的报错，但在得到服务器返回的数据并进行赋值后，fakeVoteCount的值能够找到进行了二次渲染，于是观感上并没有什么影响。

解决方法：将对应的标签设置v-if='data[0]'保证在没有得到数据前不展示即可解决，本次data即为adjustment，可以加在el-input框中也可以加在对应的el-table-column中。

<el-table-column label="调整" v-if="hasAuth" align="center">
    <template slot-scope="scope">
        <el-input
            v-if="adjustmentData[0]"
            v-model="adjustmentData[scope.$index].fakeVoteCount"
            @change="adjust(scope.row, scope.$index)"
        ></el-input>
    </template>
</el-table-column>

具体的显示判断可以根据自己的写法来改变，思想还是在真实数据没拿到前不显示对应的标签。