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