Vue JS prop in component always undefined - vue.js

Question

I have a <select> component. Once I select a category I need to get the ID and also a boolean which checks if the category has a subcategory, if it does, I make an API call to fetch the subcategories.
Parent template:
<material-selectcat v-model="catId" name="category" id="selcat">
<option
v-for="cat in cats"
:value="cat.cat_id"
:subcat="cat.has_subCat"
v-text="cat.category_name"
></option>
</material-selectcat>
Child component:
<template>
<select><slot></slot></select>
</template>
<script>
export default {
props: ['value', 'subcat'],
watch: {
watcher: function() {}
},
computed: {
watcher: function() {
this.relaod(this.value);
this.fetchSubCategories(this.value, this.subcat);
}
},
methods: {
relaod: function(value) {
var select = $(this.$el);
select.val(value || this.value);
select.material_select('destroy');
select.material_select();
},
fetchSubCategories: function(val, sub) {
var mdl = this;
var catID = val || this.value;
console.log("sub: " + sub);
mdl.$emit("reset-subcats");
if (catID) {
if (sub == 1) {
if ($('.subdropdown').is(":visible") == true) {
$('.subdropdown').fadeOut();
}
} else {
axios.get(URL.API + '/subcategories/' + catID)
.then(function(response) {
response = response.data.subcatData;
response.unshift({
subcat_id: '0',
subcategory_name: 'All Subcategories'
});
mdl.$emit("update-subcats", response);
$('.subdropdown').fadeIn();
})
.catch(function(error) {
if (error.response.data) {
swal({
title: "Something went wrong",
text: "Please try again",
type: "error",
html: false
});
}
});
}
} else {
if ($('.subdropdown').is(":visible") == true) {
$('.subdropdown').fadeOut();
}
}
}
},
mounted: function() {
var vm = this;
var select = $(this.$el);
select
.val(this.value)
.on('change', function() {
vm.$emit('input', this.value);
});
select.material_select();
},
updated: function() {
this.relaod();
},
destroyed: function() {
$(this.$el).material_select('destroy');
}
}
</script>
But inside the fetchSubCategories() function this line always returns undefined:
console.log("sub: " + sub);
If I check the Vue Devtools tab in my Chrome inspector, I can see that all of the data exists:
cat_id:0
category_name:"All Subcategories"
has_subCat:0
But why doesnt has_subCat get passed as a prop?

Answer 1

The subcat prop is undefined because you are not passing it to the component. But, a subcat prop doesn't make much sense anyway, since you want to check the value for each option in the select which could all be different.
If you compose the options inside of the component definition:
// child component script
props: ['value', 'options'],
// child component template
<template>
<select>
<slot>
<option
v-for="option in options"
:key="option.id"
:value="option.id"
:subcat="option.subcat"
v-text="option.text"
></option>
</slot>
</select>
</template>
And then pass a correctly formatted options prop to the component:
// parent component script
computed: {
options() {
return this.cats.map((cat) => {
return {
id: cat.cat_id,
subcat: cat.has_subcat,
text: cat.category_name
}
});
}
}
// parent component template
<material-selectcat v-model="catId" :options="options" name="category" id="selcat">
</material-selectcat>
Then, you could get the correct subcat value for any option's corresponding value by referencing the options prop in the fetchSubCategories method:
fetchSubCategories: function(val) {
var mdl = this;
var catID = val || this.value;
var sub = (this.options.find(o => o.id === val) || {}).subcat;
...
The reason your value prop is defined in your code is that you are using the v-model directive on the component tag. The v-model directive is just syntactic sugar for :value="something" #input="something = $event.target.value". Since you've specified catID as the v-model, that will be passed to your component as the value prop.