小编Luk*_*uka的帖子

这可能是一个过于宽泛的问题，但我正在尝试使用 Vuejs 作为框架重新创建一个cursomizer。我陷入了必须动态更改光标的位置。这些光标应该是 SVG 文件，可以从下一个组件访问它们，用户可以在其中修改大小和填充。我担心的是可以在不同的按钮中存储不同的光标并在单击时更新。我提供的代码包含动态生成的不同列表项，单击时，它会将活动类添加到所选项目。如果有人对如何解决这个问题有任何建议，请加入。

<template>
<div>
    <h1>Choose cursor</h1>
    <section class="cursors-wrapper">
        <ul class="cursor-list">
            <li class="cursor-list-item" @click="activateCursor(cursor.cursorId)" :class="{ active : active_el == cursor.cursorId }" v-for="cursor in cursors" >
               <a href="#" class="cursor-list-item-inner">
                   <!-- SVGG-->
                    <div v-html="cursor.cursorImage"></div>
                </a> 
            </li>
        </ul>
    </section>
    <div @click="choosenOne"></div>
</div>

<script>
export default {
data () {
return {
    cursors: [
        {
            cursorId: '1',
            cursorImage: `<svg class="cursor-svg cursor-svg_static hover_undefined move_undefined click_undefined" height="16"
                        width="16">
                        <ellipse class="cursor-svg__main" cx="8" cy="8" rx="8" ry="8" fill="#000"></ellipse>
                    </svg>`          
        },
        {
           cursorId: '2', …