这是对所有复选框或不是复选框的vue指令 如果您选择一个子元素,则不会选中父复选框
为什么会出现TypeError:无法设置未定义的属性“ setValue”?
和指令检查所有绑定挂钩中的错误无法设置未定义的属性'setValue'吗?
当我选中一个复选框时,错误显示为TypeError:无法读取未定义的属性'vm' 我是新的vue.js,希望得到您的建议。
这是一个html结构
#include <sys/inotify.h>
int fd = inotify_init();
inotify_add_watch(fd, "/tmp/ctrl", IN_MODIFY);
pipe1 = open("/tmp/ctrl", O_RDONLY);
struct inotify_event inev;
while (read(fd, &inev, sizeof inev))
if (read(pipe1, ch2, MAX_CTRLS) > 0)
printf("%s", ch2), fflush(stdout);
// 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>