Счетчик выбранных элементов в выпадающем списке на сложном объекте - PullRequest
Новая
       12

Счетчик выбранных элементов в выпадающем списке на сложном объекте

0 голосов
/ 23 октября 2018

Я пытался достичь выбранного счетчика в проекте Polymer.Мой компонент получает много фильтров с именем и подтемой.

Объект выглядит следующим образом: 

    filters = {name: "Health Sciences", subtopic: (3) ["Anatomy", "Cardiology",
"Clinical Medicine"]},{name: "Information Technology", subtopic: Array(5)}

Тогда мой полимер выпадает 

  <template is="dom-repeat" items="{{filters}}" as="chip">  
    <div class="block">
            <paper-dropdown-menu id="[[chip.name]]" class="full-width" label="compute(chip.name, selectedFilters)" label="width: 100%" ignore-select>
                <!-- SUBITEMS -->
                <paper-listbox class="listbox-width" slot="dropdown-content" class="dropdown-content" multi>
                    <template is="dom-repeat" items="{{chip.subtopic}}" as="option" >
                        <paper-item>

                            <paper-checkbox on-change="checkboxChanged" data-name$="[[chip.name]]" value="[[option]]">[[option]]</paper-checkbox>
                        </paper-item>
                    </template>
                </paper-listbox>
            </paper-dropdown-menu>

        </div>  

    </template>

Так что проблема в том,что функция вычисления изменяет значение на всех метках (потому что selectedFilters - это просто переменная, считающая выбранные элементы из всех фильтров), и мне было интересно, смогу ли я уведомить количество выбранных элементов по правильному пути filter.name 

            _compute(name, selectedFilters){            
            return name + " ["+this.selectedFilters+"]";
        }

Может быть, под выбранным обработчиком? 

checkboxChanged(event) {
            // event.target.dataset.name;
            var target = event.target.dataset.name;
            var value = event.target.value;
            var status = event.target.checked;
            // console.log("event value", value, "event target ", target, " event status ", status);
            this.dispatchEvent(new CustomEvent('filter-chip-event', {
                bubbles: true,
                detail: { target: target, value: value, status: status },
                composed: true
            }));
            if (status == true){
                // var nameID = target
                // this.$.nameID.label =  target +" "+ 1
                console.log('chip.name', target +" ["+ 1+"]" );
                //this.chip.name = target +" "+ 1;
                // this.selectedFilters += 1;
            } else if(status == false){
                this.chip.name = target +" "+ 0;
                // this.selectedFilters -=1;
            }

        }

заранее спасибо за ваши идеи!

...