Put HTML tag inside map method in JavaScript and Vuejs

Question

I want to insert HTML tag inside map method in Vuejs. But it doesn't work with this way. The anchor tag is displayed as plain text.

<template v-if="category.sub_category.length > 0">
                        <td>
                          {{ category.sub_category
                          .map(
                            ({ subcategory_name, sub_sub_category }) =>
                              subcategory_name +  '<a href="" @click.prevent="showAssignModal(category)">' + `(${sub_sub_category.length})` + '</a>'
                          )
                          .join(', ') }} 
                        </td>
                    </template>

This isn't React, unless you specifically use render function. Use v-for instead of map. — Estus Flask
– Estus Flask, Commented Jul 27, 2021 at 10:48
But if I use v-for it's difficult for me to use .join(', '), as I mentioned in stackoverflow.com/questions/68528162/… — Sead Lab
– Sead Lab, Commented Jul 27, 2021 at 10:52
The previous question was XY problem because you need to output HTML while the question stated that it's plain text. Don't use join then if it's difficult. You're trying to do this in a way that isn't suitable for Vue. You can move all calculations to a computed with the structure that is easy to use with v-for. — Estus Flask
– Estus Flask, Commented Jul 27, 2021 at 11:00
So, the solution is move all calculations to a computed with the structure that is easy to use with v-for.. How do i do? — Sead Lab
– Sead Lab, Commented Jul 27, 2021 at 12:37
Sorry, I don't have time to write ready to use code. But you could output comma with something like v-if="!item.isLast". Proceed from that computed property should return an array that has isLast property. — Estus Flask
– Estus Flask, Commented Jul 27, 2021 at 12:42

Abregre · Accepted Answer · 2021-07-27 13:32:48Z

1

This is what your are looking for

 <div v-if="category && category.sub_category.length > 0">
        <td v-for="(subCategory, index) in category.sub_category" :key="index">
             {{subCategory.subcategory_name}} 
             <a href="" @click.prevent="showAssignModal(category)">
                {{subCategory.sub_sub_category.length}}
            </a>,
        </td>
    </div>

But as @Estus Flask mentioned, this is not react, you should learn some fundamentals of vue first.

answered Jul 27, 2021 at 13:32

Abregre

4805 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sead Lab Over a year ago

That's great. Thank you. I am new in Vue. And I am enjoy learning by doing real project even though sometimes it's pretty hard.

Sead Lab Over a year ago

My godness, your solution is like what I've used before. stackoverflow.com/questions/68528162/… I don't realize it!

Collectives™ on Stack Overflow

Put HTML tag inside map method in JavaScript and Vuejs

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related