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）; 每次更改选择时都会输出不同的值。它应该只显示 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，你可以看看。

Answer 2

您假设监视功能的第二个参数是hasSubCat，而不是这种情况。虽然value监视函数的第一个参数表示属性的新值，但第二个参数实际上是监视属性的旧值。试试这个了解更多。

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

因此，要同时观看value和hasSubCat，您可以执行以下操作：

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

Vue 2组件道具获得错误的价值

2 个答案: