Question

我有一个<select>组件。一旦我选择了一个类别，我需要获取ID以及一个检查类别是否有子类别的布尔值，如果有，我会进行API调用以获取子类别。

父模板：

<material-selectcat v-model="catId" name="category" id="selcat">
  <option 
    v-for="cat in cats" 
    :value="cat.cat_id" 
    :subcat="cat.has_subCat" 
    v-text="cat.category_name"
  ></option>
</material-selectcat>

子组件：

<template>
  <select><slot></slot></select>
</template>

<script>

    export default {

      props: ['value', 'subcat'],
      watch: {
        watcher: function() {}
      },
      computed: {
        watcher: function() {
          this.relaod(this.value);
          this.fetchSubCategories(this.value, this.subcat);
        }
      },
      methods: {
        relaod: function(value) {

          var select = $(this.$el);

          select.val(value || this.value);
          select.material_select('destroy');
          select.material_select();
        },
        fetchSubCategories: function(val, sub) {
          var mdl = this;
          var catID = val || this.value;
          console.log("sub: " + sub);

          mdl.$emit("reset-subcats");

          if (catID) {
            if (sub == 1) {
              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>

但在fetchSubCategories()函数内，此行始终返回undefined：

console.log("sub: " + sub);

如果我检查Chrome检查器中的 Vue Devtools 标签，我可以看到所有数据都存在：

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

但为什么has_subCat不能作为道具传递？

Answer 1

subcat道具是undefined，因为您没有将其传递给组件。但是，subcat道具无论如何都没有多大意义，因为您想检查option中每个select的值，这些值可能都不同。

如果您在组件定义中组成选项：

// child component script
props: ['value', 'options'],

// child component template
<template>
  <select>
    <slot>
      <option 
        v-for="option in options" 
        :key="option.id"
        :value="option.id" 
        :subcat="option.subcat" 
        v-text="option.text"
      ></option>
    </slot>
  </select>
</template>

然后将格式正确的options道具传递给组件：

// parent component script
computed: {
  options() {
    return this.cats.map((cat) => {
      return {
        id: cat.cat_id,
        subcat: cat.has_subcat,
        text: cat.category_name
      }
    });
  }
}

// parent component template
<material-selectcat v-model="catId" :options="options" name="category" id="selcat">
</material-selectcat>

然后，通过引用subcat方法中的value道具，您可以为任何选项的相应options获取正确的fetchSubCategories值：

fetchSubCategories: function(val) {
  var mdl = this;
  var catID = val || this.value;
  var sub = (this.options.find(o => o.id === val) || {}).subcat;
  ...

您的代码中定义value prop的原因是您在组件标记上使用v-model指令。 :value="something" @input="something = $event.target.value" The v-model directive is just syntactic sugar。由于您已将catID指定为v-model，因此会将其作为value道具传递给您的组件。

组件中的Vue JS prop始终未定义

1 个答案: