search

David-Desmaisons / Vue.D3.tree

Vue component to display tree based on D3.js layout.
https://david-desmaisons.github.io/Vue.D3.tree/tree
MIT License
874 stars 136 forks source link

could not call event listener on node slot #80

Open ramyaelanchezhian opened 3 years ago

ramyaelanchezhian commented 3 years ago

HI, I want to customized node with checkbox..but unable to call methods on checkbox element. i used only svg element inside node slot

Here is my code:

<tree :data="tree" type="tree" node-text="name" nodeTextDisplay="all" linkLayout="bezier" marginx="30px" marginy="30px" :radius="5" :zoomable="false" Duration=750ms :leafTextMargin="30" layoutType="horizontal">

      <template #node="{data, node: {depth}}" >
           <template>
                  <circle r="5" stroke="#312ecc"></circle>
                  <foreignObject x="10" y="-5" width="100" height="100">
                      <input type="checkbox" :value="data.name"  id="checkbox" >
                  </foreignObject>
                  <a href="#"><text dy=".35em" x="6" dx="0" y="0" text-anchor="start" transform="rotate(0)">
                  {{data.text}}</text></a>
              </template>
      </template>        
    </tree>