Pass object into data attribute

Question

I have a data attribute like so:

<div data-id="">

In my markdown file I have frontmatter variable like so:

id: rick

Now I want to pass that object into data-id which only lets me add string. How to make like so:

<div data-id="id"> or <div data-id={{ id }}> or <div :data-id={{ id }}>

I use vuejs.

S.Visser · Accepted Answer · 2020-10-02 12:37:35Z

1

To bind attributes to an element (or component) you use

<div :data-id="id">
   ...
</div>

window.onload = () => {
  new Vue({
    el: '#app',
    data () {
      return {
        id: 123
      }
    }
  })
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.0/vue.js"></script>

<div id="app">
  <div :data-id="id">
    This is rendered as div with and data-id="123"
  </div>
</div>

answered Oct 2, 2020 at 12:37

S.Visser

4,7551 gold badge25 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Pass object into data attribute

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related