v-html does not work on router-link in SSR

361 Views Asked by At

Any idea why v-html does not work on router-link in SSR? For example:

<template>   
   <router-link
      :to="item.path"
      v-for="(item, index) in menu"
      v-html="item.title"
    />
</template>

<script setup>
const menu = [
  {
    title: 'Home',
    path: '/'
  },
  {
    title: 'About',
    path: '/about'
  },
  {
    title: 'Blog',
    path: '/blog'
  },
  {
    title: 'Contact',
    path: '/contact'
  }
]
</script>

v-html should print item.title inside router-link in SSR (just as you expect in non-SSR) but it is not.

But if you re-arrange item.title in the following markups, it works! Why??

<!-- works ok on SSR -->
<router-link
  :to="item.path"
  v-for="(item, index) in menu"
>
  {{ item.title }}
</router-link>

<!-- works ok on SSR -->
<router-link
  :to="item.path"
  v-for="(item, index) in menu"
>
  <span v-html="item.title"/>
</router-link>

Is it a bug?

0

There are 0 best solutions below