Variable isn't being accessed by inline style Vue 3-CodePudding

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
})

CodePudding user response：

Try to add 'rem' to min-height style prop:

const app = Vue.createApp({
  data() {
    return {
      nr: 10,
    };
  },
})
app.component('child', { 
  template: `
    <div  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>