Vue JS - v-html can't use

Question

I want to use with v-html. I create dynamic content. Like this:

ekspresKeno: {
      title: "Necə Oynanılır?",
      image: "/keno/ekspres-keno-popup.jpg",
      content: `
        <p>Azərbaycanda ilk dəfə dünya üzrə məşhur Keno oyunları!</p>
        <p>Keno oyunlarını ən azı 1 AZN, ən çoxu isə 1000 AZN olmaqla istənilən vaxt oyanaya bilərsiniz. Maksimal uduş məbləği isə 100 000 AZN-dir. </p>
        <p><strong>VACİB:</strong> Təsadüfi Nömrələrin Generasiyası vasitəsi ilə nömrələnmiş nömrələrdən təsadüfi şəkildə bəziləri təyin olunur və bu nömrələr əsasında uduş kombinasiyaları təyin olunur.</p>
        <p>Daha çox məlumat və bütün oyun qaydaları üçün <nuxt-link :to="$store.state.PAGES.FAQ">Yardım</nuxt-link> bölmesine bakın. </p>
      `
    }

And i send this ekspresKeno object as a props. And use it with v-html directive like this:

<div class="content" v-html="item.content"></div>

v-html can't render . Also v-html can't render @click event. How can i use in this case.

https://codesandbox.io/s/dazzling-grass-lw78de?file=/components/Tutorial.vue

Can you share your component? How do you send your prop to component? — gguney, Mar 09 '22 at 15:25
`v-html can't render`, can you please be more exhaustive here? What is not working? Also, do you have a [repro]? — kissu, Mar 09 '22 at 16:55
I added codesandbox link. I want use nuxt-link with v-html but its not rendered — Erkan Kabil, Mar 10 '22 at 08:36

score 0 · Answer 1 · answered Jul 27 '23 at 10:50

0

When 'content' is a prop than you need to use:

<div class="content" v-html="props.content"></div>

answered Jul 27 '23 at 10:50

Stefan

123
1
10

Vue JS - v-html can't use

1 Answers1