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

Question

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

当用户更改事物的顺序（在我的情况下是技能卡）时，我需要获取新的顺序并将其发布到服务器。 我可以获取HTML元素的列表，但是无法访问该卡（也是Vue组件）上的skillName属性。

我不想获得某个特定的div和/或innerText，因为它将来可能会更改，因此我能想到的最简洁的解决方案是为组件提供属性名称，并且在用户更改卡的位置后，我只是从那个HTMLElement获得那个属性。

这就是我在.vue文件的template部分中创建技能卡的方式：

.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
})

这就是我在技能卡组件中使用道具的方式（我正在使用打字稿）：

class SkillCard extends Vue {
  @Prop() skillName: String
}

这就是我尝试访问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 ，因为它也不是一个属性吗？

Answer 1

当我console.log（item.getElement（）。getAttributeNames（））时，我只能看到类和样式。 我想我也可以看到skillName，因为它也不是一个属性吗？

不，skillName是VueComponent的属性，与HTML元素的class或style属性不同。 我不完全理解您要实现的目标，但是似乎您想访问将项目拖入区域时在SkillCard上存在的@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>

Answer 2

因此，经过一些试验，我设法将属性添加到Vue组件的HTML元素中，如下所示：

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

完成此操作后，我可以使用以下命令从父元素访问此属性：

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