Это первый компонент, который отправляет список элементов, выбранных в моем 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>