时间戳

首页 > 解决方案 > 在 Vue 组件中，如何将元素的名称作为参数传递给元素调用的函数？

javascript - 在 Vue 组件中，如何将元素的名称作为参数传递给元素调用的函数？

问题描述

我正在制作一个交互式 SVG 地图，就像这个 CDC 页面上的那样。在我的 SVG 地图组件中，我有几个路径元素，每个元素都有一个name对应于它们所代表的状态名称的属性，以及我想为该状态计算的绑定类函数，如下所示：

<template>
  <svg>
    <path name="New York" :class="computeClass" />
    <path name="California" :class="computeClass" />
    <!-- etc -->
  </svg>
</template>

这可能是微不足道的，但有没有办法可以将name元素的属性作为参数传递给computeClass()它调用的函数？喜欢

<path name="New York" :class="computeClass(this.name)" />

或类似的规定？

谢谢！

标签： javascriptvue.jssvg

解决方案

没有。计算属性就像这样：计算。它们不接收任何参数。您正在寻找的是将接收参数的函数：

methods: {
  getClasses: (name) => {
    // do funny things with name here
  }
}

另一种选择是返回一个计算属性，其中包含您在对象中需要的所有内容。假设this.name可以aaa, bbb and ccc。您可以computeClass使用以下键从对象返回：

computed: {
  computeClass: () => {
    // do funny things here 
    return {
      aaa: ...,
      bbb: ...,
      ccc: ...
    }
  }
}

推荐阅读