vue3 render template syntax (component) in loop

Question

I have the following vue3 code:

<template>
{{click}}
<ol>
<li v-for="item in items" :key="item" v-html="item"></li>
</ol>
</template>

<script setup>
const click = ref();
const items = [
'<p>text</p><a @click="click+1">click</a>',
'<p>text2</p><p><router-link :to="{name: \'home\'}">home</router-link></p>'
];
</script>

How can I get the @click and router-link component to be compiled/rendered correctly in the output? Vue does not render the string content to html. Does anyone have an idea how I can get this to work? I don't wont to hard code the li-items.

https://stackoverflow.com/a/53642952/8172857 – Boussadjra Brahim Jul 14 '22 at 10:13 — Boussadjra Brahim, Jul 14 '22 at 10:13

score 1 · Answer 1 · answered Jul 14 '22 at 10:16

Your code is a big red flag. Thats not the way how to work with vue.js

Here an example how it could be done:

<template>
<ol>
   <li v-for="item in items" :key="item.link" >
      <router-link :to="item.link">{{ item.name }}</router-link>
   </li>
</ol>
</template>

<script setup>
const click = ref();
const items = ref([

   {
      name: "Link1",
      link: "/home"
   },
   {
      name: "Link2",
      link: "/login"
   }
]);
</script>

I have no idea what this code is supposed to do @click="click+1"

Also, the v-html attribute isnt a attribute that is common used. Because its also dangerous and leads to XSS vulnerabilities if you are not carefully.

Thank you, but this isn't a menu, its more a list with content and there could be some or more links (router-link) or @click events. It could be that there will be other components as well. What would be a better approach? — Oliver, Jul 14 '22 at 13:58

vue3 render template syntax (component) in loop

1 Answers1