Question

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

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

<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数据：网址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错误的方式。以这种方式重写您的应用程序：

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

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

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

以这种方式创建选项：

＆lt; option：value =＆＃34; category.cat_id＆gt;

{{category.name}}

＆LT; /选项＆GT;
让您选择聆听变更事件。

在onchange回调中加载JUST CATEGORIES FOR SELECTED CATEGORY ID，INSTEAD OF ALL CATEGORIES。例如，对于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}
]

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

我喜欢编码，所以只是为了好玩，你的API就有了实例:)

＆＃13;

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
})

＆＃13;

<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>

＆＃13;

Answer 2

方法1 ：
您可以在后端使用API，该API根据类别ID返回服务。即，您应该能够传递类别ID，它应该根据此类别ID返回服务。然后拨打此API，而不是您现在正在做的get_all_services。

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

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();
              }
            });
          },
      },

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

2 个答案: