[Vuejs]-How to get component attribute in vuejs?

by

0👍

✅

So after a little bit of experimenting I managed to add an attribute to the HTML Element from Vue component like this:

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

After doing this, I can access to this attribute from parent element with:

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

0👍

When I console.log(item.getElement().getAttributeNames()) I can only
see class and style. I think I could see skillName too, because isn’t
it also an attribute?

No, skillName is a property of the VueComponent and not the same as class or style attribute of an HTML element. I do not understand completely what you are trying to achieve, but is seems you want to access the @Prop skillSet which exist on the SkillCard when an item is dragged into the area.

In this case you would want to emit an event when this happens such as below

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

Then, the parent component using skill card would have HTML and code similar to below:

<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>

Leave a comment