Как отобразить динамически количество элементов формы SVG в Vue.js?

Question

Мои элементы svg shape и их атрибуты запрашивались со стороны сервера, тогда как сделать это динамически в vue для использования v-for без статического тега html?

Answer 1

Похоже на работу для Функция рендеринга . Например:

Создать SvgElement.vue:

render: function (createElement) {
    return createElement(
        this.shapeType,
        {
            attrs: this.attrObj
        },
        this.$slots.default
    )
},
props: {
    shapeType: {
        type: String,
        required: true
    },
    attrString: {
        type: string
    }
},
computed: {
    attrObj() {
        // Convert this.attrString into an object
        // eg return { cx: 50, cy: 50, r: 10, fill: 'red' }
    }
}

Затем использовать в MyComponent.vue

<template>
    <svg width="400" height="400">
        <SvgElement
            v-for="svg in svgArray"
            :key="svg.key"
            :shapeType="svg.type"
             :attrString="svg.attr"
        />
    </svg>
</template>

<script>
import SvgElement from './SvgElement'
export default {
    components: {
        SvgElement
    },
    data () {
        return {
            svgArray: [
                { type: 'rect', attr: 'attrString', key: 'shape1' },
                { type: 'circle', attr: 'attrString', key: 'shape2' }
            ]
        }
    }
}
</script>