категории и подкатегории drodpwn list Проблема в vuejs

Question

У меня есть раскрывающийся список категорий и подкатегорий, раскрывающийся список категорий обмена получает подкатегорию выбранной категории, а категория и идентификатор подкатегории хранятся в базе данных.

Но проблема в отображаемой опции подкатегории, выбранной во время вставки.Как я могу вызвать метод vuejs при редактировании всплывающих модальных открытых.В методе vuejs я написал выбранную функцию подкатегории на основе выбранной категории.

, но я не могу вызвать эту функцию при редактировании всплывающего модального окна, эта функция находится внутри методов vuejs

methods: {
    getcategories: function(){
    let uri = 'http://localhost:8000/getAllCategory';
        this.axios.get(uri).then(response => {
        let $this = this;
        $this.categories = response.data;
        $this.id = response.data.id
        $this.name = response.data.name
        })
         .catch(function (error) {
            console.log(error);
          });
    },

    selectSubCategory: function selectSubCategory(){

    var catId =  $("#categoryProduct").val();

    let $this = this;

    $this.axios.get('/getSubcategory', {
        params: {
        request: 'subcategory',
        id: catId
        }
    })
    .then(function (response) {
       $this.subcategories = response.data
       $this.id = response.data.id
       $this.name = response.data.name
    }); 
    }
}

, и явызывается функция selectSubCategory, как показано ниже: code

$(window).on('shown.bs.modal', function() { 
   selectSubCategory();
 });

, но выдает ошибку undefined функцию selectSubCategory.

Есть ли какое-то решение для этого?

Answer 1

Bootstrap использует JQuery для запуска настраиваемого события hidden.bs.modal, поэтому Vue не может его легко перехватить (я думаю, что он использует собственные события под капотом).

Поскольку JQuery должен быть настраница, чтобы использовать родной мод Bootstrap, просто используйте JQuery, чтобы поймать его.Предполагая, что вы добавляете ref = "vuemodal" к вашему модалу Bootstrap, вы можете сделать что-то вроде этого.

В шаблоне =>

<div class="modal fade" tabindex="-1" role="dialog" id="myModal" ref="vuemodal">

В скрипте => new Vue ({

  el:"#app",
  data:{
  },
  methods:{
    selectSubCategory(){
      //do something
    }
  },
  mounted(){
    $(this.$refs.vuemodal).on("shown.bs.modal", this.selectSubCategory)
  }
})