3π
(this grew too long for a comment, but probably already answers what you need)
itemSectionProps:
Your props are defined as:
props: {
itemSectionProps: {
type: Object,
},
},
You reference a prop of that object in your template
<draggable v-model="itemSectionProps.itemSectionCategory">
Vue cannot assume itemSectionProps.itemSectionCategory
will exist in the future.
You should give it a default (see Vue docs) to create the expected values in that object.
props: {
itemSectionProps: {
type: Object,
default() {
return { itemSectionCategory: '' };
}
},
},
Do this for all the props you use on itemSectionProps.
data() canβt seem to see props:
You can write this.itemSectionProps
instead of only itemSectionProps
.
But itemSectionProps
is already defined in props
. You can just remove itemSectionProps
from data
.
If you need to change that value, use a copy and promote changes with this.$emit.
1π
You are probably calling the props without using this.
on your data method.
You can as well define your variable itemSectionData
as below:
data(){
return {
itemSectionData: Object.assign({}, this.itemSectionProps)
}
}
Object.assign()
The Object.assign()
method copies all enumerable own properties from one or more source objects to a target object. It returns the target object. See more details here
Then use the newly defined variable itemSectionData
within your component. Like:
<draggable v-model="itemSectionData.itemSectionCategory">
If you want to update the propβs values, simply emit an event from your child component and capture it on the parent as below:
methods:{
updatePropValues(){
this.$emit('updateProp', this.yourNewValues);
}
}
On the parent component handle the event as:
<inventory-section-component @updateProp="setNewValues" :itemSectionProps="getItemSection">
</inventory-section-component>
methods:{
setNewValues(newValues){
this.itemSections = newValues;
}
}
Check it out in action here