[javascript] [Vue] 字符串转数组问题

[viiii]

目标字段 info.type 在数据库中是以字符串形式保存, 格式如下:
['元素 A', '元素 B']

在 web 端拿到数据后, 如何再作为数组进行遍历?

<v-btn
  outlined
  rounded
  text
  v-for="type_str in info.type"
  :key="type_str"
>
  {{ type_str }}
</v-btn>

已经从后端解决了，保存进数据库的时候统一格式化为 json 字符串，比从前端进行处理简单不少

[renmu123]

让后端转，认真的

[horseInBlack]

最好还是让后端直接存对象，或者存 JSON 字符串也行，处理也方便

如果如楼主所说后端只返回
'['元素 A', '元素 B']'
这样肯定是不行的
即使处理成 "['元素 A', '元素 B']" 也会出错
要把字符串处理成 '["a","b","c"]' 这样才能直接使用 JSON.parse() 把字符串转换成对象，就可以直接用 v-for 循环了
如何处理字符串就自行解决吧，或者干脆手动把字符串转换成数组、对象也可以

template:
<view v-for="item in type">{{item}}</view>

data:
type:'["a","b","c"]'

mounted:
this.type = JSON.parse(this.type);

[viiii]

@horseInBlack
明白了！看来最好还是交给后端处理了，好像后端也是我🐶

[renmu123]

@viiii 后端竟是我自己 233

[chenluo0429]

这个 info.type 的来源是什么？如果可以最好是使用便于解析的格式存储，比如 JSON 或者直接特定的分隔符，不要加引号之类的多余字符。
不然你就只能根据规律硬解析字符串了，前后端都是你，实际上谁做也没啥区别，视具体业务而定。

[guorui112]

replace 把单引号替换成双引号也行

[DL9412]

最狂野的写法，直接 eval 一把梭

[weixiangzhe]

不是有 filter 过滤器吗，加一个