Vue 2 组件道具得到错误的值

Question

I am trying to build a menu between categories. If a category has a sub-category it returns a value that says has_subCategory as 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>

The data looks like this:

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

What I dont understand is that console.log("has_subCat:" + hasSubCat); prints out different values each time I change the select. It should only display 0 or 1

Answer 1

Watcher in vue.js is supposed to be used in order to watch one value, but you can fulfill your requirement with 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);
    }
  },
  ...
}

I also made a simplified working fiddle , you can have a look.

Answer 2

You are assuming that the second parameter of your watch function is hasSubCat which is not the case. While the first parameter of the value watch function represents the new value of the property, the second parameter is actually the old value of the watched property. Try this out to understand more.

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

So to watch both of value and hasSubCat , you can do something like this:

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