javascript - Vue 3 get props in style - Stack Overflow

admin管理员组

文章数量:1025489

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.

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.

• javascript
• reactjs
• vue.js
• sass

Share Improve this question Follow edited Sep 8, 2021 at 12:11 Rade Iliev asked Sep 8, 2021 at 12:03 Rade IlievRade Iliev 23955 silver badges1414 bronze badges 1

• Check this answer - stackoverflow./a/42872117/10000229 – Zoha Malik Commented Sep 8, 2021 at 12:10

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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

I don't think you can do that. v-bind is runtime expression, whereas map-get and other SASS specific things are transpiled to CSS at build time. So, if the key of the map is not available at build time, it won't build correctly.

But, you can import SASS variables and maps into JS and use them instead.

I don't know if SASS's builtin :export supports maps, but if it doesn't you can use third party libraries like this one:

https://www.npmjs./package/sass-export

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.

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.

• javascript
• reactjs
• vue.js
• sass

Share Improve this question Follow edited Sep 8, 2021 at 12:11 Rade Iliev asked Sep 8, 2021 at 12:03 Rade IlievRade Iliev 23955 silver badges1414 bronze badges 1

• Check this answer - stackoverflow./a/42872117/10000229 – Zoha Malik Commented Sep 8, 2021 at 12:10

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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

I don't think you can do that. v-bind is runtime expression, whereas map-get and other SASS specific things are transpiled to CSS at build time. So, if the key of the map is not available at build time, it won't build correctly.

But, you can import SASS variables and maps into JS and use them instead.

I don't know if SASS's builtin :export supports maps, but if it doesn't you can use third party libraries like this one:

https://www.npmjs./package/sass-export

本文标签： javascriptVue 3 get props in styleStack Overflow