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, Jul 27 '21 at 10:48
But if I use `v-for` it's difficult for me to use `.join(', ')`, as I mentioned in https://stackoverflow.com/questions/68528162/remove-comma-in-the-last-element-in-javascript-vuejs/ — Sead Lab, Jul 27 '21 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, Jul 27 '21 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, Jul 27 '21 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, Jul 27 '21 at 12:42

score 1 · Accepted Answer · answered Jul 27 '21 at 13:32

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 '21 at 13:32

Abregre

486
4
11

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 Jul 27 '21 at 13:37
My godness, your solution is like what I've used before. https://stackoverflow.com/questions/68528162/remove-comma-in-the-last-element-in-javascript-vuejs/ I don't realize it! – Sead Lab Jul 27 '21 at 13:58

Put HTML tag inside map method in JavaScript and Vuejs

1 Answers1