我正在尝试在我的应用程序中构建拖放功能，为此我使用了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())只能看到class和style。我想我也能看到skillName，因为它不也是一个属性吗？
因此，经过一些试验后，我设法从 Vue 组件向 HTML 元素添加了一个属性，如下所示：
this.$el.setAttribute("attributeName", "attributeValue")
这样做之后，我可以从父元素访问这个属性：
item.getElement().getAttribute('attributeName')
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句