Vuejs：多次执行相同的请求，一次调用

Question

我向另一个组件发出一个数组，以显示带有复选框的列表。对于每个数据库，我都会检查db是否已通过：checked属性中调用的方法检查过，但是它会多次执行axios请求并在控制台上显示此错误：

Answer 1

这是发送在我的select2中选择的项目列表的第一个组件：

wkhtmltopdf

Answer 2

这是第二个接收列表并显示出来的

<template>
  <div>
    <div v-for="cat in newlist" :key="cat">
      <div class="d-flex">
        <div class="category bd-light">{{ data[cat] }}</div>
        <div class="round-form-check col-grey">
          <input type="checkbox" class="partage-checkbox" :name="'display_place[' + cat + ']'" value="1" :id="'une-' + cat" :checked="checkbox(cat, 1)">
          <label :for="'une-' + cat"></label>
        </div>
        <div class="round-form-check col-grey">
          <input type="checkbox" class="partage-checkbox" :name="'display_place[' + cat + ']'"
            value="2" :id="'deux-' + cat" :checked="checkbox(cat, 2)">
          <label :for="'deux-' + cat"></label>
      </div>
      <div class="round-form-check col-grey videos">
          <input type="checkbox" class="partage-checkbox" :name="'display_place[' + cat + ']'" value="4" :id="'video-' + cat">
          <label :for="'video-' + cat"></label>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Bus from "./Bus.js";
import Data from "./cat-dico.json";
import ContentCategories from "./ContentCategories.vue";
export default {
  name: "contentcats",
  components: {
    ContentCategories: "ContentCategories"
  },
  props: {
    type: {
      require: false,
      default: 0
    },
    contentid: {
      require: false,
      default: 0
    }
  },
  data() {
    return {
      newlist: "",
      val:'',
      data: Data
    };
  },
  methods: {
    checkbox(catid, place){
      axios.get('http://beesens.local/api/v1/displays/search', 
      {
        params: 
          {
            content_id: this.contentid, category_id: catid, place: place
          }
      }).then(
          response => {
          this.val = response.data.data.length;
          }
      )
      if(this.val > 0)
          return true;
        else 
          return false;
    }
  },
  mounted() { 
      Bus.$on(this.type, function(categories) {
          this.newlist = categories;
             console.log(this.newlist);
        }.bind(this)
      );
  }
};
</script>

Answer 3

这是发送在我的select2中选择的项目列表的第一个组件：

<template>
    <div id="myApp">
        <Select2 class="form-control select2" :id="'select' + this.type" :name="this.type + '_categories[]'" :options="options" v-model="listcategories" :settings="{ multiple: true }"></Select2>
    </div>
</template>

<script>
import Bus from './Bus.js';
import Select2 from 'v-select2-component';
import Options from './categories.json';
export default {
      name:'contentlist',
        components: {
            Select2
        },
        props: {
            type: {
                require: false,
                default: ''
            },
            categories: {
                require: false,
                default: 0
            }
        },
        data() {
            return {
                listcategories:'',
                options: Options
                }
        },
        mounted() {  
            this.listcategories = $.map( this.categories, function( key, index ) {
                return key.id;
            });
            $('#select' + this.type + ' select' ).val(this.listcategories).trigger('change');
        },
        watch: {
            listcategories(){
                Bus.$emit(this.type, this.listcategories);
            }`enter code here`
        }
}
</script>

这是第二个接收列表并显示出来的

<template>
  <div>
    <div v-for="cat in newlist" :key="cat">
      <div class="d-flex">
        <div class="category bd-light">{{ data[cat] }}</div>
        <div class="round-form-check col-grey">
          <input type="checkbox" class="partage-checkbox" :name="'display_place[' + cat + ']'" value="1" :id="'une-' + cat" :checked="checkbox(cat, 1)">
          <label :for="'une-' + cat"></label>
        </div>
        <div class="round-form-check col-grey">
          <input type="checkbox" class="partage-checkbox" :name="'display_place[' + cat + ']'"
            value="2" :id="'deux-' + cat" :checked="checkbox(cat, 2)">
          <label :for="'deux-' + cat"></label>
      </div>
      <div class="round-form-check col-grey videos">
          <input type="checkbox" class="partage-checkbox" :name="'display_place[' + cat + ']'" value="4" :id="'video-' + cat">
          <label :for="'video-' + cat"></label>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Bus from "./Bus.js";
import Data from "./cat-dico.json";
import ContentCategories from "./ContentCategories.vue";
export default {
  name: "contentcats",
  components: {
    ContentCategories: "ContentCategories"
  },
  props: {
    type: {
      require: false,
      default: 0
    },
    contentid: {
      require: false,
      default: 0
    }
  },
  data() {
    return {
      newlist: "",
      val:'',
      data: Data
    };
  },
  methods: {
    checkbox(catid, place){
      axios.get('http://beesens.local/api/v1/displays/search', 
      {
        params: 
          {
            content_id: this.contentid, category_id: catid, place: place
          }
      }).then(
          response => {
          this.val = response.data.data.length;
          }
      )
      if(this.val > 0)
          return true;
        else 
          return false;
    }
  },
  mounted() { 
      Bus.$on(this.type, function(categories) {
          this.newlist = categories;
             console.log(this.newlist);
        }.bind(this)
      );
  }
};
</script>