Vue JSプロップコンポーネントは常に定義されていません

Question

私は<select>コンポーネントを持っています。カテゴリを選択すると、IDを取得する必要があります。また、カテゴリにサブカテゴリがあるかどうかを調べるブール値もあります。サブカテゴリを取得するAPI呼び出しを行います。

親テンプレート：

<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が小道具として渡されますか？

Answer 1

subcat小道具は、コンポーネントに渡されていないため、undefinedです。しかしsubcat小道具はあまり意味がありません.selectの各optionの値をすべて確認したいからです。

あなたはコンポーネント定義内のオプションを構成する場合：

// 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> 

そしてコンポーネントに正しくフォーマットoptions小道具を渡します。そして、

// 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> 

、あなた任意のオプションの対応するsubcatの値を得ることができますvaluefetchSubCategories方法でoptions小道具を参照することにより：

fetchSubCategories: function(val) { 
    var mdl = this; 
    var catID = val || this.value; 
    var sub = (this.options.find(o => o.id === val) || {}).subcat; 
    ... 

---

あなたvalue小道具は、あなたのコードで定義されている理由は、コンポーネントタグのv-modelディレクティブを使用していることです。 The v-model directive is just syntactic sugarは:value="something" @input="something = $event.target.value"です。 v-modelとしてcatIDを指定したので、それはvalue小道具としてコンポーネントに渡されます。