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

阿利姆·吉雷·艾塔尔

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

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

我不想获得某个特定的 div 和/或innerText,因为它将来可能会发生变化,所以我能想到的最干净的解决方案是为组件提供一个属性名称,在用户更改卡片的位置后,我只是从那个HTMLElement.

这就是我template在 .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
})

这就是我在技能卡组件中使用道具的方式(我使用的是打字稿):

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') 返回空值。

当我console.log(item.getElement().getAttributeNames())只能看到classstyle我想我也能看到skillName,因为它不也是一个属性吗?

阿利姆·吉雷·艾塔尔

因此,经过一些试验后,我设法从 Vue 组件向 HTML 元素添加了一个属性,如下所示:

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

这样做之后,我可以从父元素访问这个属性:

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章