不使用vaadin-grid和上下文菜单

Question

我是聚合物新手。使用以下代码，我试图在上下文菜单上单击显示一个对话框。但代码不起作用。有人可以帮忙吗？

<dom-module id="my-dom">
<template>
    <style is="custom-style">
        vaadin-grid {
            --vaadin-grid-body-cell: {
                padding: 0;
            };
        }
        .body-content {
            padding: 8px;
        }
    </style>
        <vaadin-context-menu>
          <template>
            <paper-listbox>
              <paper-item on-tap="_add">Add</paper-item>
              <template is="dom-if" if="[[_isGridBody(target)]]">
                <paper-item content="[[target]]" on-tap="_remove">Remove</paper-item>
              </template>
            </paper-listbox>
          </template>

          <vaadin-grid id="grid" items="[[items]]">

            <vaadin-grid-column>
              <template class="header">Name</template>
              <template>
                <div class="body-content" data-index$="[[index]]">[[item.name]]</div>
              </template>
            </vaadin-grid-column>

            <vaadin-grid-column>
              <template class="header">Surname</template>
              <template>
                <div class="body-content" data-index$="[[index]]">[[item.surname]]</div>
              </template>
            </vaadin-grid-column>

            <vaadin-grid-column>
              <template class="header">Effort</template>
              <template>
                <div class="body-content" data-index$="[[index]]">[[item.effort]]</div>
              </template>
            </vaadin-grid-column>

          </vaadin-grid>

        </vaadin-context-menu>
                <vaadin-dialog id="dialog" no-close-on-esc no-close-on-outside-click>
                    <template>
                        <div>Press any button to close</div>
                        <br>
                        <isp-content></isp-content>
                        <vaadin-button on-click="closeDialog">Ok</vaadin-button>
                        <vaadin-button on-click="closeDialog">Cancel</vaadin-button>
                    </template>
                </vaadin-dialog>
                <!--paper-dialog id="dialog" modal>
                    <h2>Dialog Title</h2>
                    <p> Hello World</p>
                    <div class="buttons">
                        <paper-button dialog-confirm autofocus>Tap me to close</paper-button>
                    </div>
                </paper-dialog-->
</template>
<script>
    Polymer({
        is: "my-dom",
        properties: {
            items: {
                type: Array,
                value: function() {
                    return getItems();
                }
            }
        },
        ready: function() {
            console.log("my-dom ready");
        },
        _isGridBody: function(target) {
            return target.classList.contains("body-content");
        },
        _add: function() {
            this.unshift('items', getNewItem());
            this.$.dialog.open();
        },
        _remove: function(e) {
            var index = parseInt(e.target.content.getAttribute('data-index'));
            this.splice('items', index, 1);
        },
        closeDialog: function() {
            this.$.dialog.opened = false;
        }
    });
    function getNewItem() {
        function random(arr) {
            return arr[Math.floor(Math.random() * arr.length)];
        }
        var names = ['Artur', 'Patrik', 'Henrik', 'Teemu'];
        var surnames = ['Signell', 'Lehtinen', 'Ahlroos', 'Paul'];
        return {
            name: random(naisp-contentmes),
            surname: random(surnames),
            effort: Math.floor(Math.random() * 6)
        };
    }
    function getItems() {
        var items = [];
        for (var i = 0; i < 100; i++) {
            items.push(getNewItem());
        }
        return items;
    }
</script>
</dom-module>

使用上面的代码我试图在右键单击上下文菜单时显示一个vaadin对话框。该对话框第一次出现。但之后，上下文菜单根本没有显示。