1.[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "state"
解析:vue2.0 禁止子组件修改父组件的数据
方案一:父组件每次传一个对象给子组件,对象之间是引用的
例如:giveData 为一个对象
父组件:
<child-com :msg="giveData"></child-com> data(){ return { giveData: {value: false} } }
子组件:
// 传值 props: { giveData: { type: Object, default(){ return { value: false } } } }, // 监听 watch:{ giveData: { handler: function (val, oldVal) { console.log(val); }, deep: true } }, // 获取 console.log(this.giveData.value); // false
方案二:只是不报错,mounted中转
例如:
<template> <div class="timeCell"> <mt-switch v-model="value" @change="turn"></mt-switch> </div> </template> <script> export default { props:{ state:{ type:Boolean, default:false } }, data(){ return{ value: false } }, mounted(){ this.value = this.state; }, methods:{ turn(){ console.log(this.value); } } } </script> <style lang="less" scoped> </style>
2.[Vue warn]: Failed to mount component: template or render function not defined.
无法安装组件:未定义模板或渲染函数。
解析:webpack2 中不允许混用import和module.exports
方案:
将
改为
即可
3.使用 mint-ui 中的 Datetime Picker 报错
[Vue warn]: Error in mounted hook: "TypeError: this.currentValue.split is not a function"
TypeError: this.currentValue.split is not a function
解析:pickerStartValue 、pickerEndValue 格式有误
方案:
将
改为
即可
<template> <div> <!-- 头部 --> <mt-header title="重点时段管理"></mt-header> <!-- 时间设置 --> <div class="addTime"> <ul> <li @click="openStartPicker">时段始于:{{pickerStartValue}}</li> <li @click="openEndPicker">时段止于:{{pickerEndValue}}</li> </ul> <mt-datetime-picker ref="pickerStart" type="time" v-model="pickerStartValue" @confirm="handleStartConfirm" ></mt-datetime-picker> <mt-datetime-picker ref="pickerEnd" type="time" v-model="pickerEndValue" @confirm="handleEndConfirm" ></mt-datetime-picker> </div> </div> </template> <script> export default { data(){ return{ pickerStartValue:'09:30', pickerEndValue:'17:30' } }, methods: { openStartPicker() { // 开启开始日期选择器 this.$refs.pickerStart.open(); }, openEndPicker() { // 开启结束日期选择器 this.$refs.pickerEnd.open(); }, handleStartConfirm(){ console.log('确定'); }, handleEndConfirm(){ console.log('确定'); } } } </script> <style lang="less" scoped> .addTime{ ul{ margin-top: 20px; li{ display: block; margin: 0px auto; 80%; height: 40px; line-height: 40px; border-bottom: 1px solid #ddd; text-indent: 1em; } } } </style>
.