How can i use v-for in the tooltip-template ?
Hi Zhou,
Thank you for contacting Syncfusion support.
We can achieve your requirement of using “v-for in Vue” in the Maps component. To display the list of data from our “dataSource” in the tooltip template, please find the code snippet below.
Code Snippet:
|
<div id="dataSource" style="display:none"> <div class="toolback"> <div class="listing2"></div> <div> <span class="listing1"></span> <span class="listing2"></span> </div> <div v-for="(item, index) in dataSource" :key="index"> <span class="listing2"> Name : {{item.name}} ; </span> <span class="listing2"> Code : {{item.code}} ; </span> <span class="listing2"> Density : {{item.density}} ; </span> </div> </div> </div>
export default { data() { return { dataSource: [ { 'code': 'AF', 'value': 53, 'name': 'Afghanistan', 'population': 29863010, 'density': 119, 'color': '#DEEBAE' }, //.. //.. ],
tooltipSettings: { visible: true, valuePath: 'name', template:'#dataSource' }, } }, |
We have created a sample to demonstrate the same and it can be found from the below link.
Sample - https://www.syncfusion.com/downloads/support/directtrac/general/ze/VueInVFor-1401230537
Screenshot –
Please let us know if the above sample meets your requirement and let us know if you need any further assistance.
Regards,
Indumathi R.
Thanks for your reply, I had solved this problem yet .
Through listening the before tooltipRender event to get the current province's bindingData and then set it to the label's dataSource, it works...
I have a another questions to ask that how can i adjust the label's position in the map? I had tried my best to adjust it's position like modify the province's center longitude and latitude in the mapData.json or set the labelsetting properties (rx,ry) ,but it doesn't work.
Thanks for your reply, I had solved this problem yet .
Through listening the before tooltipRender event to get the current province's bindingData and then set it to the label's dataSource, it works...
I have a another questions to ask that how can i adjust the label's position in the map? I had tried my best to adjust it's position like modify the province's center longitude and latitude in the mapData.json or set the labelsetting properties (rx,ry) ,but it doesn't work.
