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
.
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.