I am currently working with vue.js components that receive their data from external sources.
For example:
<vue-button icon="fa-arrow-right" text="mytext"></vue-button>
Initially, this setup is effective. However, I encountered a challenge when trying to pass multiple values through one property.
Unfortunately, the following syntax does not work:
<vue-list items="['Entry1', 'Entry2']"></vue-list>
Is there a way to pass multiple values through a single property?
Update
I managed to find a solution, although I'm unsure if it's the most optimal approach. If anyone has a better solution, I would appreciate hearing about it.
This is how I implemented the component:
<vue-list times='[ "08:00 - 12:00", "13:00 - 21:00" ]'></vue-list>
Below is the code for the component:
<template>
<div>
<div v-for="item in timesArray">
<span v-html="item"></span>
</div>
</div>
</template>
<script>
export default {
props: ['times'],
data: function() {
return {
timesArray: [],
}
},
created: function() {
this.timesArray = JSON.parse(this.times);
}
}
</script>