Render html code in Vue.Js without using v-html

Question

I am facing a strange problem. I use VueTableDynamic as a table library (https://github.com/TheoXiong/vue-table-dynamic)

The whole implementation is correct but there is a small problem... I have certain columns that I want to render with html (for example I want to put a download icon with an href)

 this.invoices_params.data.push([
                        invoice.invoice_number,
                        invoice.user.company_name ? invoice.user.company_name : invoice.user.first_name + ' ' + invoice.user.last_name,
                        invoice.total,
                        (119 / 100) * invoice.total,
                        invoice.media.length > 0 ?
                            `<a href=${invoice.media[0].original_url}>Download invoice</a>` :
                            'No invoice',
                        moment(invoice.created_at).format('DD-MM-YYYY H:m:s'),
                   ]);

<div class="col-lg" v-if="checkbox_invoices">
                        {{ trans.invoices.title }}
                        <vue-table-dynamic :params="invoices_params"></vue-table-dynamic>
                    </div>

But I can't render that html code and I don't think I can use v-html either Is there just a way to put that icon there?

I tried to put automatic html code but in vain.

Kapcash · Accepted Answer · 2023-01-15 16:53:12Z

1

The library allows you to customize the content of a cell using slots: https://github.com/TheoXiong/vue-table-dynamic#slot

Example:

<template>
  <vue-table-dynamic :params="params">
     <template v-slot:column-5="{ props }">
        <a v-if="props.cellData" href=${props.cellData}>Download invoice</a>
        <span v-else>No invoice</span>
     </template>
  </vue-table-dynamic>
</template>

<script>
[...]

this.invoices_params.data.push([
     invoice.invoice_number,
     invoice.user.company_name ? invoice.user.company_name : invoice.user.first_name + ' ' + invoice.user.last_name,
     invoice.total,
     (119 / 100) * invoice.total,
     invoice.media.length > 0 ? invoice.media[0].original_url : null,
     moment(invoice.created_at).format('DD-MM-YYYY H:m:s'),
]);
</script>

answered Jan 15, 2023 at 16:53

Kapcash

6,9802 gold badges22 silver badges47 bronze badges

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

Collectives™ on Stack Overflow

Render html code in Vue.Js without using v-html

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related