CODEWITHSUNDEEP
javascripthtmlvue.jsvuejs2
Rju
Rju

Reputation: 63

Pass object into data attribute

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.

Upvotes: 0

Views: 676

Answers (1)

S.Visser
S.Visser

Reputation: 4725

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>

Upvotes: 1

Related Questions