Vue（Laravel 8）无法正确呈现存储在表中的数组

Posted 2023-02-22

【中文标题】Vue（Laravel 8）无法正确呈现存储在表中的数组

【英文标题】：Array stored in table not render correctly by Vue ( Laravel 8 )

【发布时间】：2021-11-13 13:01:06

【问题描述】：

我在我的项目中使用 laravel 8 和 vue。使用 axios 进行 API 请求并使用 vue 显示输出。

除了在 mysql 中将标签存储为 ["leave", "paperless"] 的一个字段外，所有渲染都很好

尝试使用下面的代码来渲染它

                <li>
                    <i class="mdi mdi-tag-text-outline"></i>
                    <a href="#" v-for="tag in article.tags">
                         tag </a>,
                </li>

输出是每个字符都是一个链接

这是html输出

             <li><i class="mdi mdi-tag-text-outline"></i> <a href="#">
                    [</a><a href="#">
                    "</a><a href="#">
                    l</a><a href="#">
                    e</a><a href="#">
                    a</a><a href="#">
                    v</a><a href="#">
                    e</a><a href="#">
                    "</a><a href="#">
                    ,</a><a href="#">
                     </a><a href="#">
                    "</a><a href="#">
                    p</a><a href="#">
                    a</a><a href="#">
                    p</a><a href="#">
                    e</a><a href="#">
                    r</a><a href="#">
                    l</a><a href="#">
                    e</a><a href="#">
                    s</a><a href="#">
                    s</a><a href="#">
                    "</a><a href="#">
                    ]</a>,
            </li>

请告知如何解决这个问题..谢谢

【问题讨论】：

你的 article.tags 是字符串而不是数组，因此你得到了这个输出。

我知道这很明显，但是如何解决它。将其转换为数组？或以不同的方式存储它。？我正在使用 bootstraptags.js 生成标签并存储它

【参考方案1】：

这与Vue无关，如果其他类似的标签在同一个应用程序中工作。

检查数据库中的数据，或重新创建它。您的数据可能会错误地存储为"["leave","paperless"]" 或类似的方式，因为它显然是一个字符串。

【参考方案2】：

我已经通过将 JSON.parse 添加到标签中解决了这个问题，如下所示

                <li>
                    <i class="mdi mdi-tag-text-outline"></i>
                    <a href="#" v-for="tag in JSON.parse(article.tags)">
                         tag </a
                    >
                </li>

效果是