0

この質問が説明するのとほぼ同じ問題があります。

Polymers で動的に挿入したい svg シンボルがいくつかありますdom-repeat

関数を使用して、配列に必要なシンボルからすべての ID を取得し、{{icons}}それを true にループして、svg を挿入します。

私のコードは次のようになります。

<div class = 'housing-icons'>
  <template is="dom-repeat" items="{{icons}}">
    <div id = 'BUTTONID'>
      <svg class="icon">
        <use xlink:href$='{{item.id}}'></use>
        <!--<use xlink:href='#bed'></use>-->  !!! This works as expected !!!
      </svg>
    </div>
    <paper-tooltip class="tooltip" for="BUTTONID" animation-config="{"entry": [], "exit": []}" position="top"><div class="tooltip__label">Lorem ipsum</div></paper-tooltip>
  </template>
</div>

タグに id をハードコーディングする#bedと、<use>すべて問題なく、開発ツールで次のように表示されます。

<use xlink:href="#bed" class="style-scope custom-housing_icons"></use>

しかし、 data-binding を使用したい場合{{item.id}}、アイコンは表示されず、開発ツールでは次のようになります。

<use class="style-scope custom-housing_icons" xlink:href="#bed"></use>

これを解決する方法についてのアイデアは大歓迎です

4

1 に答える 1