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

Posted 2023-02-23

【中文标题】如何在 vue js 中使用 html 的选择选项仅显示该类别的服务？

【英文标题】：How can I show only the services of that category using select option of html in vue js?

【发布时间】：2018-04-16 23:25:34

【问题描述】：

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

这是我的 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 数据：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 实现相同的功能？

【参考方案1】：

方法 1 : 您可以在后端有一个 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();
              
            );
          ,
      ,

【讨论】：

先生，感谢您的帮助.. 我试过这个.. 但我无法加载任何服务

您能否将console.log(e); 的输出添加到编辑行上方的成功处理程序中，并将console.log(self.services) 的输出添加到其下方并将其添加到原始问题中？

另外，请检查我的最新编辑 - self.category 而不是编辑行中的 category，然后再试一次

@coder 您是否在后端实现了 REST 服务？你能要求这样的东西：“n2s.herokuapp.com/api/post/services/cat_id/1”吗？还是只有这两个链接适用于所有类别和所有服务？

@Vandesh 等一下.. 我正在检查

【参考方案2】：

您以错误的方式使用 API。用这种方式重写你的应用：

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

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

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

以这种方式创建带有选项的选择：

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 有一个工作示例 :)

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>

【讨论】：

@coder 在我的回答中查看添加的示例。我认为它可以激发您简化实际代码。

先生，我可以问你一个问题吗。。当我搜索时（如我上面的代码），我得到的结果是 json 数据（即所有的搜索结果......会有很多搜索结果）。那么，当我点击一个特定的搜索项目时.. 我怎样才能转到另一个页面并打印它的详细信息？你能帮我解决一下吗

我不确定...通常，实现分页取决于您，这需要基于 api 可能性的单独方法。没有通用的、简单的解决方案。

你好先生..你在吗

你能看看这个问题吗..我真的被这个问题困住了。