Question

我建立了一个非常简单的测试，因为我无法使其真正发挥作用。它在测试中也不起作用:( 该组件应该显示列表中的项目，具体取决于是否在过滤器（formcheckboxgroup）中选择了状态。如果过滤器在组件内，则一切都会按预期进行（请参见下面的testScopedSlot中注释的代码）。但是，如果我想通过作用域插槽“注入”过滤器代码段（formcheckboxgroup），则过滤器不会过滤任何内容。

这是App.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在作用域插槽中不起作用。有把戏吗？

Without scoped slot

With scoped slot

作用域插槽中的checkGroup v模型不反应？

0 个答案: