时间戳

首页 > 解决方案 > 类别和子类别 drodpwn 列表 vuejs 中的问题

javascript - 类别和子类别 drodpwn 列表 vuejs 中的问题

问题描述

我有类别和子类别下拉列表，onchange 类别下拉列表获取所选类别和类别的子类别以及存储在数据库中的子类别 ID。

但问题在于在插入时选择的显示子类别选项。编辑弹出模式打开时如何调用 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 函数，如下代码

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

但它给出了错误未定义的函数selectSubCategory。

有什么解决办法吗？

标签： javascriptjqueryvuejs2

解决方案

Bootstrap 使用 JQuery 来触发自定义事件 hidden.bs.modal 因此它不容易被 Vue 捕获（我相信它在后台使用了本机事件）。

由于您必须在页面上使用 JQuery 才能使用 Bootstrap 的本机模式，因此只需使用 JQuery 来捕获它。假设您将 ref="vuemodal" 添加到您的 Bootstrap 模态中，您可以执行类似的操作。

在模板中 =>

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

在脚本 => 新 Vue({

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

推荐阅读