Vue 2コンポーネントの支柱が間違った値を取得しています

Question

カテゴリ間にメニューを作成しようとしています。カテゴリにサブカテゴリがある場合、それはhas_subCategoryをブール値0/1として返す。

<template> 
    <select><slot></slot></select> 
</template> 

<script> 

    export default { 

     props: ['value', 
       'hasSubCat'], 
     watch: { 
     value: function(value, hasSubCat) { 
      this.relaod(value); 
      this.fetchSubCategories(value, hasSubCat); 
     } 
     }, 
     methods: { 
     relaod: function(value) { 

      var select = $(this.$el); 

      select.val(value || this.value); 
      select.material_select('destroy'); 
      select.material_select(); 

     }, 
     fetchSubCategories: function(value, hasSubCat) { 
      var mdl = this; 
      var catID = value || this.value; 
      var has_subCat = hasSubCat || this.hasSubCat; 

      console.log("has_subCat:" + has_subCat); 

      mdl.$emit("reset-subcats"); 

      if (catID) { 
      if (has_subCat == 0) { 
       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> 


<material-selectcat v-model="catId" name="category" @reset-subcats="resetSubCats" @update-subcats="updateSubCats" id="selcat"> 
        <option v-for="cat in cats" :value="cat.cat_id" :hasSubCat="cat.has_subCat" v-text="cat.category_name"></option> 
        </material-selectcat> 

データは次のようになります。

cat_id:"0" 
category_name:"All Subcategories" 
has_subCat:0 

私が理解しないことはconsole.log（ "has_subCat：" + hasSubCat）ということです。は、選択を変更するたびに異なる値を出力します。それだけであなたの時計機能の2番目のパラメータはそうではありませんどのhasSubCatであると仮定されているまたは

Answer 1

ウォッチャーは、1つの値を監視するために使用されることになっていますが、できていますhelp of computedでお客様の要件を満たしてください。

export default { 
    props: ['value', 
      'hasSubCat'], 
    watch: { 
    /* without this, watcher won't be evaluated */ 
    watcher: function() {} 
    }, 
    computed: { 
    watcher: function() { 
     this.reload(this.value); 
     this.fetchSubCategories(this.value, this.hasSubCat); 
    } 
    }, 
    ... 
} 

私はまた、あなたが見ることができ、単純化された作業fiddleを作りました。

Answer 2

が表示されます。 valueウォッチ関数の最初のパラメータはプロパティの新しい値を表しますが、2番目のパラメータは実際にウォッチドプロパティの古い値です。もっと理解するためにこれを試してみてください。

watch: { 
    value: function(value, oldValue) { 
    console.log('new value:', value) 
    console.log('old value:', oldValue) 
    } 
} 

のでvalueとhasSubCatの両方を見て、あなたはこのような何かを行うことができます。vue.jsで

watch: { 
    value: function(newValue) { 
    this.reload(newValue) 
    this.fetchSubCategories(newValue, this.hasSubCat) 
    }, 
    hasSubCat: function(newHasSubCat) { 
    this.reload(this.value) 
    this.fetchSubCategories(this.value, newHasSubCat) 
    } 
}