Html 如何在vuejs中获取组件属性？

我正在尝试在我的应用程序中构建一个拖放功能，为此我正在使用库

当用户更改了物品的顺序（在我的例子中是技能卡）时，我需要获得新的顺序并将其发布到服务器。我可以获得HTML元素的列表，但是我无法访问该卡上的

skillName

属性（这也是一个Vue组件）

我不想得到某个东西的特定div和/或innerText，因为它将来可能会更改，所以我能想到的最干净的解决方案是为组件提供一个属性名，在用户更改卡的位置后，我只从

HTMLElement

获取该属性

这是我在.vue文件的

模板

部分创建技能卡的方法：

.visible-skills
  .visible-skills-item(v-for='value in visibleSkills')
    skill-card(:skillName='value')

这是我初始化Muuri的方式：

this.grid = new Muuri('.visible-skills', {
  dragEnabled: true,
  items: null
})

这是我在技能卡组件中使用道具的方式（我使用的是typescript）：

这就是我尝试访问

skillName

属性的方式：

this.grid.on('dragReleaseStart', () => {
  // this.grid.getItems() returns all skill-cards
  let neworder = this.grid.getItems().map((item) => {
    return item.getElement().getAttribute('skillName')
  })
})

item.getElement（）.getAttribute（'skillName'）

返回null

当我

console.log（item.getElement（）.getAttributeNames（））

时，我只能看到

class

和

style

。我想我也可以看到

skillName

，因为它不也是一个属性吗

当我运行console.log（item.getElement（）.getAttributeNames（））时，我只能 请参见类别和样式。我想我也能看到skillName，因为它不是 这也是一个属性吗

不，skillName是VueComponent的属性，与HTML元素的class或style属性不同。我不完全理解您试图实现的目标，但似乎您希望在将项目拖到该区域时访问技能卡上的@Prop skillSet

在这种情况下，您可能希望在发生这种情况时发出一个事件，如下所示

WhenItemIsAdded() 
{
    this.$emit('dragReleaseStart', someItem);
}

然后，使用技能卡的父组件将具有类似于以下内容的HTML和代码：

<template> 
<SkillCard v-on:dragReleaseStart="AddItem"> </SkillCard>
</template>

<script lang="ts"> 
    AddItem(emittedItem) {
      // Do Something With The Item Emitted from the SkillCard
      console.log(emittedItem);
    }
</script>

附加项（emittedItem）{
//对从技能卡中发出的项目执行某些操作
console.log（emittedItem）；
}

因此，经过一点实验，我成功地从Vue组件向HTML元素添加了一个属性，如下所示：

this.$el.setAttribute("attributeName", "attributeValue")

完成此操作后，我可以通过以下方式从父元素访问此属性：

item.getElement().getAttribute('attributeName')

---

你能提供工作用的小提琴吗？

item.getElement().getAttribute('attributeName')