vuetifyjs / nuxt

Nuxt.js + Vuetify.js starter project template.
MIT License
306 stars 109 forks source link

[Bug Report] Function only gets called once in NuxtJs #40

Closed kamleshkatpara closed 4 years ago

kamleshkatpara commented 6 years ago

Versions and Environment

Vuetify: 1.0.17 Vue: 2.5.16 Browsers: Chrome 66.0.3359.139 OS: Windows 7, Windows

Steps to reproduce

0 down vote favorite 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

Expected Behavior

create and submit and array of categories and return data

Actual Behavior

create and submit and array of categories and does not return data

Reproduction Link

https://codesandbox.io/s/7wz5oxx656

Other comments

It is working with normal vuejs

<template>
 <v-layout>

   <!-- <v-flex md3 lg3 xl3 class="hidden-sm-and-down categorySidebar">

    <v-list-tile v-for="(category, index) in categories" :key="category">
    <v-list-tile-content>
    <v-checkbox :label="category" color="info" name="category" @click="categoryChecked(category,$event.target)" 
    :value="category" v-model="checkedCategories"></v-checkbox>
    </v-list-tile-content>
    </v-list-tile>

   </v-flex> -->

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

<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);
        axios.post(process.env.apiURL + "feeds/feedsByCategories", {
          categories: [this.selectedCategories]
        }).then((res) => {
            console.log(res);
          })
      } else if (!checked) {
        const index = this.selectedCategories.indexOf(category);
        this.selectedCategories.splice(index, 1);
        console.log(this.selectedCategories);
        axios.post(process.env.apiURL + "feeds/feedsByCategories", {
          categories: [this.selectedCategories]
        }).then((res) => {
            console.log(res);
          })
        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>