Vue-Variables as <option data> 属性答案

【问题标题】：Vue-Variables as <option data> PropertyVue-Variables as <option data> 属性
【发布时间】：2022-10-16 20:54:27
【问题描述】：

出于某种原因，我必须将对象作为 json 放到标记属性中。任何想法如何做到这一点？所有的例子都不适合我。

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

需要类似的东西：

<option data-data='{"type":"repo","username":"selectize"}'>

【问题讨论】：

标签： javascript vue.js vuejs3

【解决方案1】：

尝试如下 sn-p：

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>

【讨论】：

哇，谢谢，但您的示例不适用于 vue3，仅适用于 vue2：jsfiddle.net/5exjnpm0 ?
@dazzafact 嘿，伙计，为什么不呢，现在请检查一下，我更新到 vue 3
好的，它可以工作：jsfiddle.net/5exjnpm0/5，但由于某种原因不在我的脚本中
如果你的意思是 jsfiddle.net/5exjnpm0/5，你也可以在开发工具中看到data-data='{"type":"repo","username":"selectize"}'
好的，一切顺利