Vue-object as <option data> Property

user_1163485 0
Viewed 30

For some reason i have to put the object as json to a Tag Property. Any Ides how to do this? All examples doesn't work for me.

 <html>
 <!---example 1---->
 <option v-for="(book,bookNr) in books"  data-data="{{{book}}}" >
                        {{bookNr}}
                    </option>

 <!---example 2---->
 <option v-for="(book,bookNr) in books" :data-data="'{'+book+'}'" >
                        {{bookNr}}
                    </option>
   <!---example 3---->
   <option v-for="(book,bookNr) in books" :data-data='{"+JSON.stringify(book)+"}"' >
                        {{bookNr}}
                    </option>

  </html>

need somethink like:

<option data-data='{"type":"repo","username":"selectize"}'>
vuejs3 vue.js javascript
1 Answers

Try like following snippet:

const app = Vue.createApp({
  data() {
    return {
      books: [{type:"repo", username:"selectize2"}, {type:"repo", username:"selectize"}, {type:"repo", username:"selectize3"}]
    }
  }
})
app.mount('#demo')
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
   <div v-for="(book,bookNr) in books" :data-data='JSON.stringify(book)' >
        {{bookNr}}
    </div>
 </div>

user_119891890
Related