javascript - Vue 2组件 Prop 得到错误的值

Question

我正在尝试在类别之间建立一个菜单。如果一个类别有一个子类别，它会返回一个值，表示 has_subCategory 为 bool 值 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); 每次更改选择时都会打印出不同的值。它应该只显示 0 或 1

Answer 1

vue.js 中的 Watcher 应该用于监视一个值，但您可以使用 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 ，你可以看看。