关于javascript：输入值以Vue.js和Quasar中实现的多种过滤形式消失


Input value disappears in multiple filtering form implemented in Vue.js and Quasar

我现在正在尝试在Vue的框架Quasar中进行多项目过滤。

我目前正在使用输入和复选框。
似乎没有问题，但是选择项消失了。

以下是理想的流程。

  • 选中" a"复选框时，将显示苹果和杏。
  • 如果我在输入中选择了苹果，则仅显示苹果。

    • 我应该在哪里修复代码？

    这是Codepen

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
      <q-layout view="hHh lpR fFf">

        <q-header elevated class="bg-primary text-white">
          <q-toolbar>
            <q-btn dense flat round icon="menu" @click="left = !left"></q-btn>

            <q-toolbar-title>
              Header
            </q-toolbar-title>
          </q-toolbar>
        </q-header>

    <q-drawer v-model="left" side="left" bordered>
        <q-scroll-area
                style="height: calc(100% - 53px); margin-top: 53px;">
            <q-list>
                <q-expansion-item
                        expand-separator
                        icon="ion-reorder"
                        label="abc"
                        default-opened
                >
                   
                        <q-checkbox
                                v-model="checkFilter"
                                v-for="item in sort_abc"
                                class="col-xs-12 col-sm-6 col-md-6"
                                :key="item"
                                :val="item"
                                :label="item"
                                color="orange"
                        ></q-checkbox>
                   
                </q-expansion-item>
            </q-list>
        </q-scroll-area>
       
            <q-select filled
                      v-model="inputFilter"
                      use-input
                      hide-selected
                      fill-input
                      input-debounce="0"
                      @filter="filterFn"
                      :options="sample_list"
                      class="full-width full-height"
                      placeholder="Search"
                      style="height: 50px;"
                      clearable
                      color="orange"
            >
                <template v-slot:no-option>
                    <q-item>
                        <q-item-section class="text-grey">
                            no result
                        </q-item-section>
                    </q-item>
                </template>
            </q-select>
       
    </q-drawer>

        <q-page-container>
          <template>
           
              <q-card class="my-card" v-model="filteredData" v-for="(item, index) in filteredData">
          <q-card-section>
            {{ item.name }}
            {{ index }}
          </q-card-section>
                                </q-card>
           
          </template>
        </q-page-container>

        <q-footer elevated class="bg-grey-8 text-white">
          <q-toolbar>
            <q-toolbar-title>
              Footer
            </q-toolbar-title>
          </q-toolbar>
        </q-footer>

      </q-layout>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    let Fruits = ['apple', 'apricot', 'banana', 'orange'];

    new Vue({
      el: '#q-app',
      data: function () {
        return {
          left: true,
          version: Quasar.version,
          sort_name_select:[],
          sort_abc:['a', 'b', 'c'],
          sort_abc_select:[],
          sample_list:Fruits,
          card_list: [
          {name:"banana", val:"b"},
          {name:"apple", val:"a"},
          {name:"apricot", val:"a"},
          {name:"orange", val:"o"}
          ]
        }
      },
      methods: {
        filterFn(val, update, abort) {
                        update(() => {
                            const needle = val.toLowerCase();
                            this.sample_list = Fruits.filter(v => v.toLowerCase().indexOf(needle) > -1);
                        })
                    }
        },
      computed: {
        inputFilter:{
          get: function (x) {
            return this.sort_name_select;
          },
          set: function (y) {
            this.sort_name_select.length = 0;
            this.sort_name_select.push(y);
          }
        },
        checkFilter:{
          get: function (x) {
            return this.sort_abc_select;
          },
          set: function (y) {
            this.sort_abc_select = y;
          }
        },
        filteredData() {
          let self = this;
          return self.card_list
            .filter(function (post) {
              if(self.sort_abc_select.length !== 0){
                if (self.sort_abc_select.includes(post['val'])){
                  return post['val'];
                }
              }else{
                return self.card_list;
              }
            })
           .filter(function (post) {
              if(self.sort_name_select.length !== 0){
                if (self.sort_name_select.includes(post['name'])){
                  return post['name'];
                }else if(self.sort_name_select.includes(null)){
                  return self.card_list;
                }
              }else{
                return self.card_list;
              }
            })
        }
      }
    })

    为了显示选择标签，您计算出的属性应类似于：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
      computed: {
        inputFilter:{
          get: function (x) {
            return this.sort_name_select[0];
          },
          set: function (y) {
            this.sort_name_select=[];
            this.sort_name_select.push(y);
          }
        },

    @Boussadjra答案的版本未设置双重赋值：

    1
    2
    3
    4
    5
    6
    7
    8
    9
      computed: {
        inputFilter:{
          get: function (x) {
            return this.sort_name_select[0];
          },
          set: function (y) {
            this.sort_name_select=[y];
          }
        },

    相关讨论