Я построил очень простой тест, потому что не могу заставить его работать в режиме реального времени. И это не работает ни в тесте :( Компонент должен показывать элементы из списка в зависимости от того, выбрано ли состояние в фильтре (formcheckboxgroup) или нет. Если фильтр находится внутри компонента, все работает как положено ( см. код, прокомментированный в testScopedSlot ниже.) Но если я хочу «внедрить» часть кода фильтра (formcheckboxgroup) через слот с областью видимости, фильтр ничего не фильтрует.
Вот приложение. vue:
<template>
<div id="app">
<test-scoped-slot :list="theList">
<template v-slot:menu="{ filter, panelState, states }">
<div >
<b-button v-b-toggle.panel class=" sm-3">
<b-icon icon="funnel" variant="light"></b-icon>
Filtres
</b-button>
<b-collapse
id="panel"
v-model="panelState.panelOpen"
class="sm-2 rounded"
appear
>
<b-form-group>
<b-form-checkbox-group
stacked
id="checkbox-group-2"
v-model="filter.listFilter"
name="flavour-2"
:options="states.listStates"
>
</b-form-checkbox-group>
</b-form-group>
</b-collapse>
</div>
</template>
</test-scoped-slot>
</div>
</template>
<script>
import testScopedSlot from './components/testScopedSlot.vue'
export default {
name: 'App',
components: {
testScopedSlot
},
data(){
return {
theList:[
{id:1, state:1, txt:"State 1"},
{id:2, state:1, txt:"State 1"},
{id:3, state:2, txt:"State 2"},
{id:4, state:2, txt:"State 2"},
{id:5, state:3, txt:"State 3"},
{id:6, state:3, txt:"State 3"},
{id:7, state:4, txt:"State 4"},
{id:8, state:4, txt:"State 4"},
{id:9, state:5, txt:"State 5"},
{id:10, state:5, txt:"State 5"},
{id:11, state:6, txt:"State 6"},
{id:12, state:6, txt:"State 6"},
{id:13, state:7, txt:"State 7"},
{id:14, state:7, txt:"State 7"},
]
}
}
}
</script>
И testScopedSlot. vue:
<template>
<div class="hello">
<ul>
<li v-show="isSelected(t.state)" v-for="t in list" :key="t.id">{{t.txt}}</li>
</ul>
<slot
name="menu"
v-bind:filter="{ listFilter }"
v-bind:panelState="{ panelOpen }"
v-bind:states="{ listStates }"
></slot>
<!-- <div >
<b-button v-b-toggle.panel class=" sm-3">
<b-icon icon="funnel" variant="light"></b-icon>
Filtres
</b-button>
<b-collapse
id="panel"
v-model="panelOpen"
class="sm-2 rounded"
appear
>
<b-form-group>
<b-form-checkbox-group
stacked
id="checkbox-group-2"
v-model="listFilter"
name="flavour-2"
:options="listStates"
>
</b-form-checkbox-group>
</b-form-group>
</b-collapse>
</div> -->
</div>
</template>
<script>
export default {
name: 'test-scoped-slot',
props: {
list: {type:Array}
},
data(){
return {
listFilter:[],
panelOpen:false,
listStates:[
{ text: "state 1", value: "1" },
{ text: "state 2", value: "2" },
{ text: "state 3", value: "3" },
{ text: "state 4", value: "4" },
{ text: "state 5", value: "5" },
{ text: "state 6", value: "6" },
{ text: "state 7", value: "7" },
]
}
},
methods:{
isSelected(state){
console.log(state, this.listFilter);
return this.listFilter.find(s=>+s===state);
}
}
}
</script>
Как будто listFilter не реагировал в слоте с ограничениями. Есть ли хитрость?
Без прорези с ограничением
С прорезью с ограничением