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

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

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

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

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

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.

Method 2

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

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


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x