I'm trying to pass a prop to my inline :style in Vue 3, but for some reason I'm unable to do it. Here's my code. Any help is appreciated.
<template>
<div style="width: 100vw;" :style="{'min-height': props.rem}"></div>
</template>
const props = defineProps({
rem: Number
})
Try to add 'rem' to min-height style prop:
const app = Vue.createApp({
data() {
return {
nr: 10,
};
},
})
app.component('child', {
template: `
<div class="child" style="width: 100vw;" :style="{'min-height': rem+'rem'}"> rem = {{ rem }}</div>
`,
props: {
'rem': {
type: Number,
default: 5
}
},
})
app.mount('#demo').child {
background-color: purple;
}<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
<child :rem="nr"></child>
</div>