V-модель checkGroup в выбранном слоте не реагирует? - PullRequest
0 голосов
/ 17 апреля 2020

Я построил очень простой тест, потому что не могу заставить его работать в режиме реального времени. И это не работает ни в тесте :( Компонент должен показывать элементы из списка в зависимости от того, выбрано ли состояние в фильтре (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 не реагировал в слоте с ограничениями. Есть ли хитрость?

Без прорези с ограничением

С прорезью с ограничением

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...