Vue. js компонент внутри элемента SVG не работает - PullRequest
Новая
       3

Vue. js компонент внутри элемента SVG не работает

1 голос
/ 12 марта 2020

У меня есть компонент с именем legend, который должен встраивать SVG-элементы в шаблон, который помещает фактические теги SVG: 

    <svg xmlns="http://www.w3.org/2000/svg" class="pie-chart" :width="outerwidth" :height="outerheight">

    <legend ref="legend" :series="series" :position="positionLegend" :options="{}" ></legend>   

    </svg>

Но компонент легенды не обрабатывается при выводе: 

   <div id="graphbox">
       <svg xmlns="http://www.w3.org/2000/svg" width="1691" height="14" class="pie-chart">

       <legend series="[object Object],[object Object],[object Object]" position="[object Object]" options="[object Object]"></legend>

        </svg>
    </div>

Разве vue не анализирует в тегах SVG?

1 Ответ

0 голосов
/ 12 марта 2020

Компоненты внутри <svg> должны нормально работать, но вам нужно переименовать legend во что-то другое. legend - это стандартное имя элемента HTML, поэтому Vue запутается.

Также убедитесь, что вы правильно зарегистрировали компонент, локально или глобально. Обычно Vue предупредит вас, если вы забыли зарегистрировать компонент, но в этом случае этого не произойдет, потому что legend является стандартным элементом HTML.

Вот полный пример, аналогичный один в вопросе: 

const myLegend = {
  template: `<circle r="10" cx="20" cy="20" :fill="color" />`,
  props: ['color']
}

new Vue({
  el: '#graphbox',
  
  components: {
    myLegend
  },
  
  data () {
    return {
      outerheight: 50,
      outerwidth: 50,
      color: '#ff0000'
    }
  }
})
<script src="https://unpkg.com/vue@2.6.11/dist/vue.js"></script>

<div id="graphbox">
  <svg :width="outerwidth" :height="outerheight">
    <my-legend :color="color"></my-legend>   
  </svg>
</div>
...