Wahsei
Wahsei

Reputation: 307

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

Each 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

Upvotes: 1

Views: 123

Answers (2)

Wahsei
Wahsei

Reputation: 307

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

enter image description here

Upvotes: 1

tauzN
tauzN

Reputation: 7030

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.

Upvotes: 1

Related Questions