存储在 table 中的数组不能被 Vue 正确渲染（Laravel 8）

Question

我在我的项目中使用 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>

输出是每个字符都是一个link

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

请指教如何解决这个问题。谢谢

Answer 1

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

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

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

效果是

存储在 table 中的数组不能被 Vue 正确渲染（Laravel 8）

Array stored in table not render correctly by Vue ( Laravel 8 )

arrays

tags

laravel

vue.js