为什么会出现TypeError:无法设置未定义的属性“ setValue”?

时间:2018-10-17 07:22:11

标签: checkbox vuejs2

这是对所有复选框或不是复选框的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>

0 个答案:

没有答案