I am new to Vue.js and struggling to grasp its concepts. I am interested in finding a way for my custom Vue component (UnorderedList) to manipulate the content within it.
For example, if I have <p> tags inside my component like this :
<UnorderedList :dashed="true">
<p>some sentence here</p>
<p>some sentence here</p>
</UnorderedList>
the rendered page would display as follows:
some sentence here
some sentence here
My goal is to have my component automatically prefix a "-" before each <p> tag, resulting in the following rendering:
- some sentence here
- some sentence here
This is how my UnorderedList.vue file looks currently:
<template>
<ul >
<span v-if="dashed">-</span>
</ul>
</template>
<script>
export default {
name: 'UnorderedList',
props: {
dashed: {
type: Boolean,
default: false,
},
},
}
</script>
Unfortunately, the above code does not achieve the desired result. I am seeking a solution that will add a "-" before all content within the custom component (UnorderedList).
If anyone has any suggestions on how to accomplish this, please let me know. And I apologize if this seems like a basic question.