Vue 3 get props in style

Question

I have some problems implementing props in style tag. I have props like:

 props: {
    icon: {
      type: String,
      required: true
    },
    label: {
      type: String,
      required: true
    }
  }

And I want to use label props in Style, like:

    <style scoped lang="scss">
      .class{
        color: label;
      }
    </style>

is that possible? Because it's not working like this

Idea is actually to make a call like:

.drop-color{
    color: map-get($var, label);
  }

This will work if I define it as;

.drop-color{
    color: map-get($var, 'blue');
  }

I just need to pass prop label instead.

Check this answer - https://stackoverflow.com/a/42872117/10000229 — Zoha Malik, Sep 08 '21 at 12:10

Boussadjra Brahim · Answer 1 · 2021-09-08T12:17:20.440

0

With new script setup you're able to do it using v-bind of vue 3.2.x:

<script setup>
import {defineProps} from 'vue'

const props = defineProps({
     icon: {
      type: String,
      required: true
    },
    label: {
      type: String,
      required: true
    }
})


</script>
  <style scoped lang="scss">
      .class{
        color: v-bind(label);
      }
    </style>

LIVE DEMO

edited Sep 08 '21 at 12:17

answered Sep 08 '21 at 12:11

Boussadjra Brahim

64,851
14
107
134

Thanks, but idea is to do something like color: map-get($products, v-bind(icon)); and this way it's not working – Rade Iliev Sep 08 '21 at 12:34
please share the whole component code and the package.json file – Boussadjra Brahim Sep 08 '21 at 12:36

Vue 3 get props in style

1 Answers1