Using HTML5 data-* attributes with Vue 2.0

So I am looping through a list of items and want to add the item object to a data attribute. What I have done so far is this:

<div class="is-droppable">
    <div v-for="item in collection">
         <p :data-item="item" class="is-droppable"> {{ item.id }} </p>  
     </div>
</div>

This is combined with jquery-ui drag & drop widgets, so when the element is dropped I listen to the event that gives me the element being dragged as a jquery object.

Given this the logical thing to do is accessing it like: element.data('event'), but it gives me [object Object].

Even tried to access it likeelement.data('event').id and get undefined.

How you guys store objects in data attributes and later access it?

richard

9 years ago

Level 21

You are getting [object Object] because item is an object.

Are you trying to achive something like this?

<p data-item="1" class="is-droppable">1</p>

Then you should do

<p :data-item="item.id" class="is-droppable"> {{ item.id }} </p>

1 like

Please or to participate in this conversation.