函数仅在NuxtJs中调用一次

时间:2018-05-11 13:16:01

标签: vue.js vuetify.js nuxt.js

我在我的项目中使用NuxtJs,我有一个复选框列表,点击每个复选框我发送一个复选框数组到我的POST api返回数据。 在这里,当我检查第一个复选框时,它返回数据。但是,当我检查第二个复选框时,它不会返回数据。 我的意思是它只返回选中的单个复选框上的数据。 它使用普通的vuejs而不是nuxtjs

我的代码:

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

0 个答案:

没有答案