如何在Vue js中使用html的select选项仅显示该类别的服务？

Question

我有几个类别，如酒店，医疗保健等。因此，当我选择酒店时，仅应加载类别酒店的服务。 现在，当我选择特定类别时，所有服务都正在加载？

这是我的vue js脚本。 它有两个URL，一个用于获取所有类别，另一个用于获取所有服务。

<script>
searchContent = new Vue({
        el: "#searchContent",
        data: {
          vector: {}
        }
      });
categories = new Vue({
    el: '#categories',
    data: {
        articles: [],
        services: [],
        category: 0,
        subcategory: 0,
        content: false
    },
      watch: {
           subcategory: function(e) {
            this.prefetch();
          },
           category: function() {
            var self = this;
            self.subcategory = 0;
            $.ajax({
              url: "https://n2s.herokuapp.com/api/post/get_all_services/",
              data: {
                'service': self.id
              },
              type: "POST",
              dataType: "JSON",
              success: function(e) {
                self.services = e;
                self.prefetch();
              }
            });
          },
      },

    mounted() {
        var vm = this;

        $.ajax({
            url: "https://n2s.herokuapp.com/api/post/get_all_category/",
            method: "GET",
            dataType: "JSON",
            success: function(e) {
                 vm.articles = e;
                console.log(e.articles)

            },
        });
    },

          methods: {
          prefetch: function() {
            var filter = {};
            filter['category'] = this.category;
            filter['subcategory'] = this.subcategory;
            if (this.content !== false)
              this.content.abort()
            this.content = $.ajax({
              'url': 'https://n2s.herokuapp.com/api/post/filter/',
              data: filter,
              dataType: "JSON",
              type: "POST",
              success: function(e) {
                 window.searchContent.vector = e.data;
                console.log(e);
              }
            })
          }
        }

})
</script>

这是我的html代码

<div class="m-select">
<select class="" v-model="category" name=category>

<option value="">Select Service</option>
<option style="padding-left: 10px;" v-for="post in articles"v-bind:value="post.name" >{{post.name}}</option>

</select>
 </div>

<div class="m-select">
<select class="" v-model="subcategory" name="subcategory">
<option value="">Select Services</option>
<option v-for=" so in services" v-bind:value="so.name">{{so.name}}</option>
</select>
</div>

类别的JSON数据：URL https://n2s.herokuapp.com/api/post/get_all_category/

[{"name": "Health care", "cat_id": 1}, {"name": "Education", "cat_id": 2}, {"name": "Bakery", "cat_id": 3}, {"name": "Software company", "cat_id": 4}, {"name": "Automobile", "cat_id": 5}, {"name": "Agriculture", "cat_id": 6}, {"name": "Marketing", "cat_id": 7}, {"name": "Multimedia", "cat_id": 8}, {"name": "Electrical Shop", "cat_id": 9}, {"name": "AutoTaxi", "cat_id": 10}, {"name": "Workshop", "cat_id": 11}, {"name": "Engineering Work", "cat_id": 12}, {"name": "Medical Shop", "cat_id": 13}, {"name": "Lathe", "cat_id": 14}, {"name": "Hotel", "cat_id": 15}]

服务的JSON数据为：url https://n2s.herokuapp.com/api/post/get_all_services/

[{"name": "Eye clinic", "cat_id": 1, "sub_cat_id": 1}, {"name": "Homeo pathy", "cat_id": 1, "sub_cat_id": 2}, {"name": "Arts college", "cat_id": 2, "sub_cat_id": 3}, {"name": "Engineering", "cat_id": 2, "sub_cat_id": 4}, {"name": "Web development", "cat_id": 4, "sub_cat_id": 5}, {"name": "Wood lathe", "cat_id": 14, "sub_cat_id": 6}, {"name": "Steel lathe", "cat_id": 14, "sub_cat_id": 7}, {"name": "Steel lathe", "cat_id": 14, "sub_cat_id": 8}, {"name": "Hotel", "cat_id": 15, "sub_cat_id": 9}, {"name": "non veg hotels", "cat_id": 15, "sub_cat_id": 10}, {"name": "Veg Hotel", "cat_id": 15, "sub_cat_id": 11}, {"name": "Medicalshop", "cat_id": 13, "sub_cat_id": 12}, {"name": "Engineering Works", "cat_id": 12, "sub_cat_id": 13}, {"name": "Two Wheeler Workshop", "cat_id": 11, "sub_cat_id": 14}, {"name": "Four wheel workshop", "cat_id": 11, "sub_cat_id": 15}, {"name": "Auto Taxi", "cat_id": 10, "sub_cat_id": 16}, {"name": "Car", "cat_id": -1, "sub_cat_id": 17}, {"name": "Car", "cat_id": 10, "sub_cat_id": 18}, {"name": "Rent a Car", "cat_id": 10, "sub_cat_id": 19}, {"name": "electrical shop", "cat_id": 9, "sub_cat_id": 20}]

因此，当我选择类别教育时，仅加载与教育有关的服务。如何使用vues js实现相同的服务？

Answer 1

您使用API​​的方式错误。 这样重写您的应用程序：

1. 使用此api调用加载所有类别： https : //n2s.herokuapp.com/api/post/get_all_category/

您将获得所有类别，结构如下：

[
  {"name": "Health care", "cat_id": 1},
  {"name": "Education", "cat_id": 2},
  // etc
]

2. 通过以下方式创建带有选项的select：

   <option：value =“ category.cat_id>

   {{ 分类名称 }}

   </ option>

3. 让您选择监听更改事件。

在onchange回调中，为所选类别ID加载“类别”，而不是“所有类别”。 例如，对于cat_id 1进行以下api调用： https : //n2s.herokuapp.com/api/post/get_services_of/1

您将仅针对选定的ID获得服务：

[
  {"name": "Eye clinic", "cat_id": 1, "sub_cat_id": 1},
  {"name": "Homeo pathy", "cat_id": 1, "sub_cat_id": 2}
]

4. 现在，作为最后一步，使用基于此json的选项填充第二个选择...

我喜欢编码，所以仅出于娱乐目的，您的API中有一个有效的示例:)

 var store = new Vuex.Store({ state: { categories: [], services: [] }, actions: { async loadOptions ({state}, data) { var response = await fetch(data.src + data.id) state[data.to] = await response.json() } } }) Vue.component('my-selector', { template: '#my-selector', methods: { loadServices (ev) { this.$store.dispatch('loadOptions', { to: 'services', src: 'https://n2s.herokuapp.com/api/post/get_services_of/', id: ev.target.value }) } }, created () { this.$store.dispatch('loadOptions', { to: 'categories', src: 'https://n2s.herokuapp.com/api/post/get_all_category/', id: '' }) } }) new Vue({ el: '#app', store }) 

 <div id="app"> <my-selector></my-selector> </div> <template id="my-selector"> <div> <select @change="loadServices"> <option value="0" selected>Select category</option> <option v-for="category in $store.state.categories" :key="category.cat_id" :value="category.cat_id" > {{ category.name }} </option> </select> <br> <select> <option value="0" selected>Select service</option> <option v-for="service in $store.state.services" :key="service.sub_cat_id" :value="service.sub_cat_id" > {{ service.name }} </option> </select> </div> </template> <script src="https://unpkg.com/vuex@3.0.1/dist/vuex.min.js"></script> <script src="https://unpkg.com/vue@2.5.3/dist/vue.min.js"></script> 

Answer 2

方法1 ：
您可以在后端有一个API，该API根据类别ID返回服务。 也就是说，您应该能够传递类别ID，并且应该基于该类别ID返回服务。 然后调用此API，而不是您现在正在执行的get_all_services 。

方法2 ：
根据category的监视处理程序中前端的所有服务的结果，根据cat_id过滤项目（请参阅下面带有注释的附加代码） -JSFiddle链接

watch: {
           subcategory: function(e) {
            this.prefetch();
          },
           category: function() {
            var self = this;
            self.subcategory = 0;
            $.ajax({
              url: "https://n2s.herokuapp.com/api/post/get_all_services/",
              data: {
                'service': self.id
              },
              type: "POST",
              dataType: "JSON",
              success: function(e) {
                let categoryIdArray = self.articles.filter(x=>x.name==self.category);
                self.services = e.filter(x=>x.cat_id==categoryIdArray[0].cat_id); // Filter items based on category id
                self.prefetch();
              }
            });
          },
      },