vaadin-grid选择无效

Question

行选择对我不起作用。 仅当我一次选择所有内容时，selectedItems数组才会更改。 我不确定是否出了错或者是错误。

selectedItems：包含所选项目的数组。 https://www.webcomponents.org/element/vaadin/vaadin-grid/elements/vaadin-grid

<link rel="import" href="../bower_components/polymer/polymer-element.html">

<link rel="import" href="../bower_components/vaadin-grid/vaadin-grid.html">
<link rel="import" href="../bower_components/vaadin-grid/vaadin-grid-selection-column.html">

<dom-module id="schedule-vaadin-test">

    <template>

        <vaadin-grid id="material" aria-label="Array Data Example" items="[[items]]" selected-items="{{selectedItems}}">

            <vaadin-grid-selection-column auto-select>
            </vaadin-grid-selection-column>

            <vaadin-grid-column width="50px" flex-grow="0">
                <template class="header">#</template>
                <template>[[index]]</template>
            </vaadin-grid-column>

            <vaadin-grid-column>
                <template class="header">First Name</template>
                <template>[[item.firstName]]</template>
            </vaadin-grid-column>

            <vaadin-grid-column>
                <template class="header">Last Name</template>
                <template>[[item.lastName]]</template>
            </vaadin-grid-column>

        </vaadin-grid>
    </template>

    <script>
        /**
         * @customElement
         * @polymer
         */
        class ScheduleVaadinTest extends Polymer.Element {
            static get is() {
                return 'schedule-vaadin-test';
            }

            static get properties() {
                return {
                    items: {
                        type: Array,
                        value: [{"firstName":"Foo", "lastName":"Bar"},
                                {"firstName":"Foo", "lastName":"Bar"},
                                {"firstName":"Foo", "lastName":"Bar"}]
                    },

                    selectedItems: {
                        type: Array,
                        observer: 'selectedItemsChanged'
                    }
                };
            }

            static get observers() {
                return []
            }

            selectedItemsChanged() {
                console.log(this.selectedItems);
            }
        }

        customElements.define(ScheduleVaadinTest.is, ScheduleVaadinTest);
    </script>
</dom-module>

Answer 1

这是适合您的工作代码：

<link rel="import" href="../bower_components/polymer/polymer-element.html">

<template>

    <vaadin-grid id="material" aria-label="Array Data Example" items="[[items]]" selected-items={{selectedItems}} active-item="{{selectedItem}}">

        <vaadin-grid-selection-column auto-select>
        </vaadin-grid-selection-column>

        <vaadin-grid-column width="50px" flex-grow="0">
            <template class="header">#</template>
            <template>[[index]]</template>
        </vaadin-grid-column>

        <vaadin-grid-column>
            <template class="header">First Name</template>
            <template>[[item.firstName]]</template>
        </vaadin-grid-column>

        <vaadin-grid-column>
            <template class="header">Last Name</template>
            <template>[[item.lastName]]</template>
        </vaadin-grid-column>

    </vaadin-grid>
</template>

<script>
    /**
     * @customElement
     * @polymer
     */
    class ScheduleVaadinTest extends Polymer.Element {
        static get is() {
            return 'schedule-vaadin-test';
        }

        static get properties() {
            return {
                items: {
                    type: Array,
                    value: [{"firstName":"Foo", "lastName":"Bar"},
                        {"firstName":"Foo2", "lastName":"Bar2"},
                        {"firstName":"Foo3", "lastName":"Bar3"}]
                },
                selectedItem: {
                    type: Array,
                }
                ,
                selectedItems: {
                    type: Array,
                }
            };
        }

        static get observers() {
            return ['_selectedItemsChanged(selectedItem, selectedItems)'];
        }

         _selectedItemsChanged(selectedItem, selectedItems){
            console.log(selectedItems);
        }
    }

    customElements.define(ScheduleVaadinTest.is, ScheduleVaadinTest);
</script>

我添加了activeItem属性，该属性将保存用户最近一次与之交互的项目。 同样，将观察者更改为观察单个或多个更改。

Answer 2

复杂的观察者在观察者数组中声明。 复杂的观察者可以监视一个或多个路径。 这些路径称为观察者的依存关系。

我只是忘了使用一个复杂的观察器。 我不确定为什么选择时对象会更改两次。 我将尽快更新此答案。

[ 编辑 ：观察者已更改为仅观察接头 。 由于使用的通配符（*）观察者，数组的值不会更改两次，而是会在控制台上打印两次。 当观察拼接时，然后观察阵列长度变化时，首先调用观察者。 ]

<link rel="import" href="../bower_components/polymer/polymer-element.html">

<link rel="import" href="../bower_components/vaadin-grid/vaadin-grid.html">
<link rel="import" href="../bower_components/vaadin-grid/vaadin-grid-selection-column.html">

<dom-module id="schedule-vaadin-test">

    <template>

        <vaadin-grid id="material" aria-label="Array Data Example" items="[[items]]" selected-items="{{selectedItems}}">

            <vaadin-grid-selection-column>
            </vaadin-grid-selection-column>

            <vaadin-grid-column width="50px" flex-grow="0">
                <template class="header">#</template>
                <template>[[index]]</template>
            </vaadin-grid-column>

            <vaadin-grid-column>
                <template class="header">First Name</template>
                <template>[[item.firstName]]</template>
            </vaadin-grid-column>

            <vaadin-grid-column>
                <template class="header">Last Name</template>
                <template>[[item.lastName]]</template>
            </vaadin-grid-column>

        </vaadin-grid>
    </template>

    <script>
        /**
         * @customElement
         * @polymer
         */
        class ScheduleVaadinTest extends Polymer.Element {
            static get is() {
                return 'schedule-vaadin-test';
            }

            static get properties() {
                return {
                    items: {
                        type: Array,
                        value: [{"firstName":"Foo1", "lastName":"Bar1"},
                                {"firstName":"Foo2", "lastName":"Bar2"},
                                {"firstName":"Foo3", "lastName":"Bar3"}]
                    },
                    /*activeItem: {
                        type: Array,
                        observer: '_activeItemChanged'
                    },--this is not being used*/

                    selectedItems: {
                        type: Array
                    }
                };
            }

            static get observers() {
                return [
                    //'_selectedItemsChanged(selectedItems.*)'
                      '_selectedItemsChanged(selectedItems.splices)'
                ]
            }

            _selectedItemsChanged() {
                console.log(this.selectedItems);
            }
        }

        customElements.define(ScheduleVaadinTest.is, ScheduleVaadinTest);
    </script>
</dom-module>