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

I am using laravel 8 and vue in my project. using axios for API request and display the output using vue.

All rendered nicely except One field that stored tags as ["leave", "paperless"] in mysql

Tried to render it using the code below

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

Output is each of character is a link

And this is the html output

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

Please advise on how to solve this issue.. Thanks

CodePudding user response：

This is not related to Vue, if other similar tags work in the same application.

Check your data in your database, or recreate it. Your data may be stored like this "["leave","paperless"]" or similar by mistake, as it is obviously a string.

CodePudding user response：

I have solved the problem by adding JSON.parse to the tags as below

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

Effect is