Vue中如何将对象以JSON格式绑定到<option>标签的data属性？

嘿，我来帮你搞定这个问题！你想要把Vue循环里的book对象转成标准JSON字符串，存入<option>的data-data属性里对吧？咱们先拆解下你之前尝试的几个示例哪里出了问题，再给你正确的实现方式～

你的示例问题分析 #

• 示例1：{{{book}}}是Vue 1.x的老旧语法（现在已经没人用啦），而且直接插值对象的话，会被默认转成[object Object]，完全不是JSON格式。
• 示例2：:'{'+book+'}'这种字符串拼接方式没用，因为book是对象，转成字符串默认就是[object Object]，最终结果会变成'{[object Object]}'，和你要的JSON差远了。
• 示例3：字符串拼接的语法完全错误，Vue的绑定表达式里不需要额外加引号和加号来拼接，这种写法根本不会正确执行JSON.stringify。

正确的实现方式 #

其实很简单，用Vue的**v-bind语法（冒号简写）**直接绑定属性，然后用JSON.stringify()把对象序列化成合法的JSON字符串就行：

<option v-for="(book, bookNr) in books" :data-data="JSON.stringify(book)">
  {{ bookNr }}
</option>

为什么这个写法可行？ #

• 用:data-data绑定后，Vue会把右侧的表达式JSON.stringify(book)当成JavaScript执行，把book对象转成标准的JSON字符串。
• Vue会自动处理属性的引号问题，最终渲染出来的HTML就会是你想要的格式，比如：

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

额外提示 #

如果之后你需要从DOM元素里读取这个data-data属性的值，记得用JSON.parse()把字符串转回对象：

// 假设你拿到了对应的option元素
const bookData = JSON.parse(optionElement.getAttribute('data-data'));

内容的提问来源于stack exchange，提问作者dazzafact