Modify the class's height by utilizing props

Question

Modify the class's height by utilizing props

Using Vue 3 and Bootstrap 5, I have a props named number which should receive integers from 1 to 10.

My goal is to incorporate the number in my CSS scrollbar class, but so far it's not working as expected. There are no error messages, it just doesn't work.

What can I do to resolve this issue? Thank you!

<template>
  <div class="scrollbar">
  </div>
</template>

<script>
  export default {
    props: {
      number: Number,
    }
  }
</script>

<style>
  .scrollbar {
    height: calc(500px + (var(--number) * 20 px));
  }
</style>

javascript css vue.js vuejs3 bootstrap-5

Answer 1

Answer №1

You have the ability to utilize v-bind within your <style> tag in order to connect a data property to your CSS.

This will also dynamically update if your state undergoes changes.

<template>
  <div class="scrollbar">
  </div>
</template>

<script>
  export default {
    props: {
      number: Number,
    }
  }
</script>

<style>
  .scrollbar {
    height: calc(500px + (v-bind(number) * 20px));
  }
</style>

Demo

Answer 2

You have the ability to utilize v-bind within your <style> tag in order to connect a data property to your CSS.

This will also dynamically update if your state undergoes changes.

<template>
  <div class="scrollbar">
  </div>
</template>

<script>
  export default {
    props: {
      number: Number,
    }
  }
</script>

<style>
  .scrollbar {
    height: calc(500px + (v-bind(number) * 20px));
  }
</style>

Demo

Modify the class's height by utilizing props

Answer №1

Similar questions

Using the -webkit-box-reflect property along with the CSS position:absolute styling

What is the approach for utilizing Vue List Rendering with v-if to verify the presence of items within an array?

Comparing Strict CSS with Hacky CSS - Which is the Better Choice?

Error message stating 'compression is not defined' encountered while attempting to deploy a Node.js application on Heroku

Inquiry into the use of Jquery.ajax()

Vue instance with non-reactive data

Different methods to avoid using $scope.$watch in a directive when dealing with an undefined variable

Retrieving pals from the API and showcasing them on the user interface

How can Node.js and Express be used to conceal Javascript code on the backend?

Provide spacing on the sides for a background position

Vetur is experiencing issues with template functionality, such as not properly checking data and methods

Error: The integer provided in the Stripe payment form is invalid in the

Is there a way to exit from await Promise.all once any promise has been fulfilled in Chrome version 80?

What is the best way to create a list from a matrix using JavaScript?

What are the benefits of incorporating a mock AJAX call in testing scenarios?

Create a full-width slider using Materialize CSS framework

Is it possible to reduce a field value in firestore after successfully submitting a form?

Component not being returned by function following form submission in React

Exploring Symfony2: Enhancing user experience with dynamic form submission and dropdown menu updates

Firebase is not updating the number