vue calling component, component calls back to the data in the array assignment, the error Invalid prop type check failed for prop value. Expecte

Error message:

 

Code information:
call a tree component, select some information

<componentsTree ref="typeTreeComponent"
  @treeCheck="treeCheck"
  :isClearAllChecked=true
  :defaultProps="defaultProps">
</componentsTree>

  

After selecting the selected data to return, and assigned to the data array (type, typeName) within parent components:

data: function () {
	return {
		dataForm: {
			type: [],
			typeName: []
		}
	}
},

  


Callback method execution:

treeCheck: function (a, b) {
	let t = []
	let tid = []
	for (var i = 0; i < b['checkedNodes'].length; i++) {
		t.push(b['checkedNodes'][i]['name'])
		tid.push(b['checkedNodes'][i]['id'])
	}
	this.dataForm.typeName = [].concat(t)
	this.dataForm.type = [].concat(tid)
},

  


When assigned to the type and typeName, error
Invalid prop: type check failed for prop "value" Expected String, Number, got Array.

Solution:
redefine two variables:

AtypeName: '',
Atype: '',

When the callback function to these two variables assignment:

treeCheck: function (a, b) {
	let t = []
	let tid = []
	for (var i = 0; i < b['checkedNodes'].length; i++) {
		// if (b['checkedNodes'][i]['children'].length > 0) continue
		t.push(b['checkedNodes'][i]['name'])
		tid.push(b['checkedNodes'][i]['id'])
	}

	this.AtypeName = t.join(',')
	this.Atype = tid.join(',')
},

  

These two changes worth listening:

watch: {
	AtypeName (val) {
		this.dataForm.typeName = val.split(',')
		this.dataForm.type = this.Atype.split(',')
		console.log(this.dataForm)
	}
}

  


When changes to the type and typeName assignment

This is a compromise solution, not familiar with vue clear reason being given, so to solve it first

Guess you like

Origin www.cnblogs.com/pangchunlei/p/11067677.html