this is a vue directive to all checkbox or not checkbox if you choose one child elment,the parent checkbox won't checked
why TypeError: Cannot set property 'setValue' of undefined?
and error in directive check-all bind hook Cannot set property 'setValue' of undefined?
when I check one checkbox, the error showing, TypeError: Cannot read property 'vm' of undefined i am new vue.js， hope get your suggestion please.
this is an html structure
// js code and contains vue directive
<script>
export default {
name: 'PublicDocument',
data () {
return {
items: [
{
docName: 'John Brown',
size: 18,
address: 'New York No. 1 Lake Park',
createDate: '2016-10-03',
creator: '李笑来'
},
{
docName: 'Jim Green',
size: 24,
address: 'London No. 1 Lake Park',
createDate: '2016-10-01',
creator: '李笑来'
},
{
docName: 'Joe Black',
size: 30,
address: 'Sydney No. 1 Lake Park',
createDate: '2016-10-02',
creator: '李笑来'
}
],
// 全选的默认
allChecked:false,
indexs:[],
}
},
methods:{
gernerateId: function (index){
return "ipt-check" +index
}
},
directives: {
'check-all': {
twoWay: true,
params: ['checkData', 'result', 'key','relative'],
/*checkData:列表数据,
result:返回的结果,
key:列表数据中需要返回的字段,
relative:是否返回与列表数据相同引用地址的选中结果*/
bind() {
/*提取被选中的项*/
console.log(this);
this.setValue = () => {
let result = []
if (this.params.relative) {
this.vm[this.params.checkData].forEach((item) => {
item.checked ? result.push(item) : "";
});
} else {
this.vm[this.params.checkData].forEach((item) => {
//删除checked属性
let temp = {};
(() => delete Object.assign(temp, item).checked)();
item.checked ? result.push(item[this.params.key] || temp) : "";
});
}
this.vm[this.params.result] = result
};
/*为原始数据的每一个对象添加一个checked属性*/
this.addChecked = () => {
this.vm[this.params.checkData].forEach((item) => {
Vue.set(item, 'checked', false)
});
};
/*如果所有的列表的checked属性都为true,则选中全选框,否则不选中全选框 */
this.vm.$watch(this.params.checkData, (data) => {
if(!data.length) return;
data.every((item) => item.checked) ? this.set(true) : this.set(false);
this.setValue()
}, {deep: true});
//当列表发生变化时重新绑定
this.vm.$watch(this.params.checkData, (data) => {
if(!data.length) return
this.addChecked();
});
},
// checkAll发生更改时
update(checkAll) {
/*如果全选框被选中,则将列表的所有checked属性转为true,否则转为false */
checkAll ? this.vm[this.params.checkData].forEach((item) => {
item.checked = true
}) : this.vm[this.params.checkData].forEach((item) => {
item.checked = false
});
this.setValue()
},
}
}
}
</script>
<style lang="less">
.ks-table-wrapper {
position: relative;
}
.ks-table-border {
width: inherit;
height: 100%;
max-width: 100%;
overflow: hidden;
color: #515a6e;
font-size: 12px;
background-color: #fff;
box-sizing: border-box;
}
.ks-table-border:before {
content: '';
width: 100%;
height: 1px;
position: absolute;
left: 0;
bottom: 0;
background-color: #dcdee2;
z-index: 1;
}
.ks-table-header:after {
display:block; content:"clear"; height:0; clear:both; overflow:hidden; visibility:hidden;
}
ul li {
float: left;
}
.ks-ul {
background:rgba(250,250,250,1);
}
.ks-ul li {
color: #666;
}
ul.ks-table-ul{
float: left;
border-bottom: 1px solid #e8eaec;
width:100%;
height: 48px;
line-height: 48px;
}
ul.ks-table-ul {
padding-left: 0 !important;
}
ul.ks-table-ul li {
position: relative;
}
ul.ks-table-ul:hover {
background:rgba(247,252,255,1);
}
.columns1 {
width: 3%;
cursor: pointer;
.textLeft;
}
.columns2 {
width: 52%;
.textLeft;
}
.columns3 {
width: 20%;
.textLeft;
}
.columns4 {
width: 20%;
.textLeft;
}
.columns5 {
width: 5%;
.textLeft;
}
.input_check {
position: absolute;
visibility: hidden;
}
.input_check + label {
display: inline-block;
width: 14px;
height: 14px;
border: 1px solid #ddd;
margin-left: 9px;
}
.input_check:checked + label:after {
content: "";
position: absolute;
left: 10px;
bottom: 24px;
width: 12px;
height: 6px;
border: 2px solid #666;
border-top-color: transparent;
border-right-color: transparent;
-ms-transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-webkit-transform: rotate(-60deg);
transform: rotate(-45deg);
}
</style>
<template>
<div class="pulic-wrap">
<div class="wrapper-content ivu-article">
<article>
<div class="ks-table-wrapper">
<div class="ks-table-border">
<div class="ks-table-header">
<ul class="ks-table-ul ks-ul">
<li class="columns1">
<input type="checkbox" class="input_check com-cb ml_10" v-model="allCheck" v-check-all="allCheck" check-data="items" result="customerResult" id="list_check_all">
<label for="list_check_all"></label>
</li>
<li class="columns2">文件名</li>
<li class="columns3">大小</li>
<li class="columns4">创建时间</li>
<li class="columns5">创建者</li>
</ul>
</div>
<div class="ks-table-body">
<ul class="ks-table-ul" v-for="(item, index) in items">
<li class="columns1">
<input type="checkbox" class="input_check com-cb ml_10" v-model="item.checked" :id="gernerateId(index)">
<label :for="gernerateId(index)"></label>
</li>
<li class="columns2"></li>
<li class="columns3"></li>
<li class="columns4"></li>
<li class="columns5"></li>
</ul>
</div>
</div>
</div>
</article>
</div>
</div>
</template>
Aucun commentaire:
Enregistrer un commentaire