v-for in Vue JS component does not output anything
The v-for in the code below seems to prevent any output.
The browser only displays
It should show 5 lines
Vue.component('skeleton-body', {
props: ['lines'],
template: `<div>
<div v-for="n in lines" :class="lines">
<div class="Polaris-SkeletonBodyText"></div>
</div>
</div>`
});
Vue.component('skeleton-display', {
props: ['size'],
template: `<div :class="['Polaris-SkeletonDisplayText__DisplayText', 'Polaris-SkeletonDisplayText--size--' + size]"></div>`
});
Vue.component('translation', {
props: ['phrase', 'type', 'lines', 'size'],
template: `<template v-if="!phrase">
<component :is="getSkeletonComponent" :lines="lines" :size="size"></component>
</template>
<template v-else>
<span>{{ phrase }}</span>
</template>`,
computed: {
getSkeletonComponent() {
if (this.type === 'body') {
console.log (this.lines);
return 'skeleton-body';
}
else if (this.type === 'display') {
switch (this.size) {
case 'small':
this.size = 'Small'
break;
case 'medium':
default:
this.size = 'Medium'
break;
case 'large':
this.size = 'Large'
break;
case 'extraLarge':
this.size = 'ExtraLarge'
break;
}
return 'skeleton-display';
}
}
}
});
new Vue({
el: '#app',
data: {
language: {}
},
methods: {}
})
<head> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.2/vue.min.js"></script> <link type="text/css" rel="stylesheet" href="https://unpkg.com/@shopify/polaris@10.30.0/build/esm/styles.css"> </head> <body> <div id="app"> <translation :phrase="language.test" type="body" lines="5"></translation> </div> </body>
