Function only gets called once in NuxtJs

Question

I am using NuxtJs in my project, I a have list of checkboxes, on click of each checkbox I am sending an array of checkboxes to a my POST api which return data. Here, when I check the first checkbox it returns the data. But when I check the second checkbox it does not does return the data. I mean it only returns the data on single checkbox checked. Its working with normal vuejs but not in nuxtjs

My Code:

<script>
import axios from "axios";
import uniq from "lodash/uniq";

export default {
  async asyncData({ req, params }) {
    let [storeInfo, feedsInfo] = await Promise.all([
      axios.get(
        process.env.apiURL +
          "/stores/findOne?filter[where][store_name]" +
          "=" +
          params.id
      ),
      axios.post(process.env.apiURL + "feeds/feedsByStores", {
        stores: [params.id]
      })
    ]);
    return {
      stores: storeInfo.data,
      feeds: feedsInfo.data,
      categories: uniq(feedsInfo.data.map(p => p.feed_category))
    };
  },
  data() {
    return {
      checkedCategories: [],
      checkedCategory: false,
      selectedCategories: []
    };
  },
  methods: {
     feedsByCategories: function(categories) {
        console.log(categories);
        axios.post(process.env.apiURL + "feeds/feedsByCategories", {
          categories: [categories]
        }).then((res) => {
            console.log(res);
          })
      },
     categoryChecked: function(category, checked) {
      this.display = "inline";
      if (checked) {
        this.selectedCategories.push(category);
        console.log(this.selectedCategories);
        this.feedsByCategories(this.selectedCategories);
      } else if (!checked) {
        const index = this.selectedCategories.indexOf(category);
        this.selectedCategories.splice(index, 1);
        this.feedsByCategories(this.selectedCategories);
        if (this.selectedCategories == "") {
          this.display = "none";
          this.getFeeds();
        }
      }
      if (!checked && this.selectedCategories.length === 0) {
        this.getFeeds();
      }
    },
    uncheckCategory: function(checkedCategory) {
      this.checkedCategories = this.checkedCategories.filter(
        name => name !== checkedCategory
      );
      const index = this.selectedCategories.indexOf(checkedCategory);
      this.selectedCategories.splice(index, 1);
      this.feedsByCategories(this.selectedCategories);
      if (this.checkedCategories == "") {
        this.display = "none";
        this.getFeeds();
      }
    },
    uncheckallCategories: function(event) {
      this.checkedCategories = [];
      this.display = "none";
      this.search = "";
      this.Search = "";
      this.filteredCategories;
    },
    getFeeds() {
       return this.feeds;
      }
  }
};
</script>

<template>
 <v-layout>
<ul class="list-unstyled scrollbar">
 <li v-for="(feedcategory, index) in categories" :key="feedcategory.id">
  <input type="checkbox" name="category" @change="categoryChecked(feedcategory,$event.target.checked)" 
  :id="index + 1" :value="feedcategory" v-model="checkedCategories">
   {{ feedcategory }}
 </li>
</ul>
 </v-layout>
</template>

@DecadeMoon, If I remove any one of those it does not create my categories array. I tried to remove :value after removing it. It checks all the checkboxes — user6579211
– user6579211, Commented May 11, 2018 at 13:26

user6579211 · Accepted Answer · 2018-05-11 14:16:20Z

0

My Typo,

I removed the brackets for my categories array and it worked:

feedsByCategories: function(categories) {
        console.log(categories);
        axios.post(process.env.apiURL + "feeds/feedsByCategories", {
          categories: categories
        }).then((res) => {
            console.log(res);
          })
      }

answered May 11, 2018 at 14:16

user6579211

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Function only gets called once in NuxtJs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related