Как отобразить один компонент, но в разных местах сайта и с разным наполнением
Поставлена задача: есть компонент с чекбоксами (с любым контентом), необходимо вывести его на странице сайта в нескольких местах, с разным наполнением.
Компонент:
<template>
<div class="check-boxes">
<h2>{{ CHECKBOXITEMS.checkTitle }}</h2>
<ul>
<li v-for="(checkItem, index) in CHECKBOXITEMS.checkBoxes" :key="index">
<label>
<input
type="checkbox"
v-bind:value="checkItem.name"
v-model="CHECKBOXITEMS.checkResult"
v-bind:style="CHECKBOXITEMS.styleBox"
/>
{{ checkItem.name }}
</label>
</li>
</ul>
<h3>Список:</h3>
<span
class="selected"
v-for="(selected, index) in CHECKBOXITEMS.checkResult"
:key="index"
>
{{ selected }}
</span>
</div>
</template>
<script>
import { mapGetters } from "vuex";
export default {
name: "VcheckBox",
computed: {
...mapGetters(["CHECKBOXITEMS", "CHECKBOXITEMS2", "CHECKBOXITEMS3"])
}
};
</script>
Store:
export default {
state: {
CheckBoxItems: {
checkBoxes: [
{ name: "Андрей" },
{ name: "Сергей" },
{ name: "Ромка" },
{ name: "Саня" }
],
checkTitle: "Кто будет тусить",
checkResult: [],
styleBox: {
height: "13px",
width: "13px"
}
},
CheckBoxItems2: {
checkBoxes: [
{ name: "Миша" },
{ name: "Вася" },
{ name: "Катя" },
{ name: "Сеня" }
],
checkTitle: "Кто будет петь?",
checkResult: []
},
CheckBoxItems3: {
checkBoxes: [
{ name: "Илья" },
{ name: "Ася" },
{ name: "Митяй" },
{ name: "Луиджи" }
],
checkTitle: "Кто будет загорать?",
checkResult: []
}
},
mutations: {},
actions: {},
getters: {
CHECKBOXITEMS(state) {
return state.CheckBoxItems;
},
CHECKBOXITEMS2(state) {
return state.CheckBoxItems2;
},
CHECKBOXITEMS3(state) {
return state.CheckBoxItems3;
}
}
};
Пример, как надо:
<div>
<VcheckBox />
<h3>Заголовок</h3>
<VcheckBox />
<p>Lorem ipsum dolor sit amet</p>
<VcheckBox />
</div>
Все 3 чекбокса с разным наполнением из стора, записывать геттеры в скрипт примера нельзя, только в компоненте. Пробовал передавать "кодовое слово"
<VcheckBox v-bind:checkboxTitle="CHECKBOXITEMS" />
а в компоненте принимал через пропс и вставлять checkboxTitle вместо CHECKBOXITEMS, но естественно выдает ошибку без геттеров.
Ответы (1 шт):
Автор решения: Serg Kos
→ Ссылка
Спасибо большое за наводку Kirill Babinec, помогло явное указание данных
<VcheckBox v-bind:checkboxTitle="$store.getters.CHECKBOXITEMS" />