Vue.js中如何强制data-attribute的格式（尤其是数组类型）？

你遇到的问题本质是：Vue绑定:data-*属性时，会自动把数组这类复杂数据转成逗号分隔的字符串，导致后续用JSON.parse读取时无法还原成原格式。下面给你几个实用的解决办法，完美支持变量传递：

1. 手动转JSON字符串绑定（最简单直接） #

绑定:data-*时，用JSON.stringify()把变量转成标准JSON字符串，读取时再用JSON.parse()还原，不管元素里有没有逗号都能正确处理：

<script setup>
const as_variable = ["Lunes", "Martes", "Miercoles", "Jueves"];

const test_read_all_da_data = (ev) => {
  const el = ev.currentTarget;
  // 现在能正确解析成数组
  console.log(JSON.parse(el.dataset.days4));
};
</script>

<template>
  <button 
    :data-days4="JSON.stringify(as_variable)"
    @click="test_read_all_da_data"
  >data-attributes</button>
</template>

这种方式不需要额外封装，直接处理就能解决变量传递的问题，完全替代split的方案。

2. 自定义指令封装（适合频繁使用的场景） #

如果项目里经常需要给data-attribute传复杂数据，可以写个自定义指令自动处理序列化：

<script setup>
const as_variable = ["Lunes", "Martes", "Miercoles", "Jueves"];

// 自定义指令v-data-json，自动处理JSON序列化
const vDataJson = {
  mounted(el, binding) {
    const attrKey = `data-${binding.arg}`;
    el.setAttribute(attrKey, JSON.stringify(binding.value));
  },
  updated(el, binding) {
    const attrKey = `data-${binding.arg}`;
    el.setAttribute(attrKey, JSON.stringify(binding.value));
  }
};

const test_read_all_da_data = (ev) => {
  const el = ev.currentTarget;
  console.log(JSON.parse(el.dataset.days4));
};
</script>

<template>
  <button 
    v-data-json:days4="as_variable"
    @click="test_read_all_da_data"
  >data-attributes</button>
</template>

用这个指令后，绑定复杂数据时不用每次都写JSON.stringify，代码更干净。

补充：为什么之前的写法不行？ #

• :data-days1/:data-days2/:data-days4：Vue对数组类型的绑定值会自动转为逗号分隔的字符串（比如"Lunes,Martes,Miercoles,Jueves"），这不是合法的JSON格式，所以JSON.parse会报错。
• data-days3：这是原生HTML属性，直接写的JSON字符串会被浏览器原样保留，所以能解析，但没法传递Vue变量，灵活性不够。

总之，JSON序列化+反序列化是处理data-attribute复杂数据的标准方案，既能支持变量传递，又能兼容各种数据类型。

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