Saya mencoba membuat menu antar kategori. Jika sebuah kategori memiliki sub-kategori, ia mengembalikan nilai yang mengatakan has_subCategory sebagai 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>

Datanya terlihat seperti ini:

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

Yang tidak saya mengerti adalah console.log("has_subCat:" + hasSubCat); mencetak nilai yang berbeda setiap kali saya mengubah pilihan. Seharusnya hanya menampilkan 0 atau 1

1
user2722667 16 Agustus 2017, 19:22

2 jawaban

Jawaban Terbaik

Pengamat di vue.js seharusnya digunakan untuk menonton satu nilai, tetapi Anda dapat memenuhi kebutuhan Anda dengan bantuan 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);
    }
  },
  ...
}

Saya juga membuat biola yang disederhanakan, Anda dapat melihatnya.

2
choasia 17 Agustus 2017, 14:04

Anda mengasumsikan bahwa parameter kedua dari fungsi jam tangan Anda adalah hasSubCat yang tidak demikian. Sementara parameter pertama dari fungsi jam value mewakili nilai baru dari properti, parameter kedua sebenarnya adalah nilai lama dari properti yang diawasi. Coba ini untuk lebih memahami.

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

Jadi untuk menonton value dan hasSubCat, Anda dapat melakukan sesuatu seperti ini:

watch: {
  value: function(newValue) {
     this.reload(newValue)
     this.fetchSubCategories(newValue, this.hasSubCat)
  },
  hasSubCat: function(newHasSubCat) {
     this.reload(this.value)
     this.fetchSubCategories(this.value, newHasSubCat)
  }
}
0
Ikbel 17 Agustus 2017, 13:15