私は<select>
コンポーネントを持っています。カテゴリを選択すると、IDを取得する必要があります。また、カテゴリにサブカテゴリがあるかどうかを調べるブール値もあります。サブカテゴリを取得するAPI呼び出しを行います。Vue JSプロップコンポーネントは常に定義されていません
親テンプレート:
<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>
子コンポーネント:
<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>
しかしfetchSubCategories()
関数内でこの行は常にundefined
を返します。
console.log("sub: " + sub);
私はVueのデベロッパーツールをチェックしますのタブ私のクロムの検査官は、私はすべてのデータが存在していることを見ることができます:
cat_id:0
category_name:"All Subcategories"
has_subCat:0
しかし、なぜdoesntのhas_subCat
が小道具として渡されますか?
あなたはpropを 'option'に渡しますが、あなたは' select'にpropを宣言します。 –
@EricGuanすみません、私は従いませんか? '' subcat = "cat.has_subCat" '' – user2722667
の横にあるすべての値を読むことができます。書かれたコードは 'material-selectcat'が' subcat'という名前のプロップを期待していると書いています。テンプレートが ''を期待していることを意味します。しかし、あなたはvueコンポーネントではなく、何もしないHTMLタグに小道具を渡しています。 v-modelはあなたに選択されたcatIdを与えるので、単にidで猫を見つけて、サブキャットを持っているかどうか確認することができます –