Vue 2組件道具變得錯誤值

Question

我想在類別之間建立一個菜單。如果一個類別有一個子類別，它會返回一個值，該值表示has_subCategory爲boolean 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）;每次更改選擇時，都會打印出不同的值。它應該只顯示或

Answer 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

你假設你的手錶功能的第二個參數是hasSubCat這是情況並非如此。儘管value監視函數的第一個參數表示屬性的新值，但第二個參數實際上是被監視屬性的舊值。嘗試瞭解更多。

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) 
    } 
}