title: How can I show only the services of that category using select option of html in vue js?
body: <p>I have several categories as hotel, healthcare etc. So, when I select hotel, only the services of category hotel should be loaded. Now when I am selecting a particular category all the services are loading? </p>
  
  <p>This is my vue js script. It has two urls one to get all categories and other to get all services.</p>
  
  <pre><code>&lt;script&gt;
  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);
                }
              })
            }
          }
  
  })
  &lt;/script&gt;
  </code></pre>
  
  <p>This is my html code</p>
  
  <pre><code>&lt;div class="m-select"&gt;
  &lt;select class="" v-model="category" name=category&gt;
  
  &lt;option value=""&gt;Select Service&lt;/option&gt;
  &lt;option style="padding-left: 10px;" v-for="post in articles"v-bind:value="post.name" &gt;{{post.name}}&lt;/option&gt;
  
  &lt;/select&gt;
   &lt;/div&gt;
  
  &lt;div class="m-select"&gt;
  &lt;select class="" v-model="subcategory" name="subcategory"&gt;
  &lt;option value=""&gt;Select Services&lt;/option&gt;
  &lt;option v-for=" so in services" v-bind:value="so.name"&gt;{{so.name}}&lt;/option&gt;
  &lt;/select&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JSON data for category: url <a href="https://n2s.herokuapp.com/api/post/get_all_category/" rel="nofollow noreferrer">https://n2s.herokuapp.com/api/post/get_all_category/</a></p>
  
  <pre><code>[{"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}]
  </code></pre>
  
  <p>JSON data for services is: url <a href="https://n2s.herokuapp.com/api/post/get_all_services/" rel="nofollow noreferrer">https://n2s.herokuapp.com/api/post/get_all_services/</a></p>
  
  <pre><code>[{"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}]
  </code></pre>
  
  <p>So, when I select category education, only services related to education be loaded.. How can I achieve the same using vues js?</p>