Utiliser une variable Vue dans la section style d'un composant

Question

Est-il possible d'utiliser une variable avec la balise de style d'un composant ? En fait, j'ai importé un mixin dans ma balise de style qui accepte deux couleurs pour créer un dégradé dans une classe. Cela fonctionne très bien mais je veux que ce soit dynamique et que je puisse le définir via une base de données. Je comprends que je peux lier un style via inline mais un dégradé pour un div est plutôt long et fonctionne bien mieux en tant que mixin.

composant :

<template>

    <section class="section" v-bind:class=" { 'color-section' : content.gradient_color_one }">

        <div class="container">

            <div class="columns">

                <div class="column is-half">

                    <h2 class="is-size-4" v-html="content.title"></h2>

                    <div class="section-content" v-html="content.description"></div>

                    <a class="button" :href=" '/'+ content.button_link">{{ content.button_text }}</a>

                </div>

                <div class="column">

                    <img :src="content.image" :alt="content.title" />

                </div>

            </div>

        </div>

    </section>

</template>

<script>
    export default {

        props:[
            'content'
        ],

    }
</script>

<style lang="scss" scoped>

    @import "../../sass/helpers/mixins";

    .color-section{
        color:red;
        @include diagonalGradient( content.gradient_color_one , content.gradient_color_two);
    }

</style>

mixins

@mixin diagonalGradient($top, $bottom){
  background: $top;
  background: -moz-linear-gradient(-45deg, $top 0%, $bottom 100%);
  background: -webkit-gradient(left top, right bottom, color-stop(0%, $top), color-stop(100%, $bottom));
  background: -webkit-linear-gradient(-45deg, $top 0%, $bottom 100%);
  background: -o-linear-gradient(-45deg, $top 0%, $bottom 100%);
  background: -ms-linear-gradient(-45deg, $top 0%, $bottom 100%);
  background: linear-gradient(135deg, $top 0%, $bottom 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#92fe9d', endColorstr='#00c8ff', GradientType=1 );
}

Answer 1

Vous devriez utiliser les propriétés calculées, car elles constituent probablement le meilleur moyen et le plus propre de réaliser ce que vous essayez de faire. Il y a également un site entier sur ce sujet dans les Docs de Vue :

https://vuejs.org/v2/guide/class-and-style.html

En gros, vous pourriez faire quelque chose comme ça :

computed: {
  style () {
    return 'background: ' + this.top + ';' + '...'
  }
}

Au lieu de passer le mixin, vous pourriez alors passer les variables top et bottom. C'est très pratique parce que dans votre fonction style () calculée, vous avez la liberté de faire toutes les choses liées à javascript que vous voulez, donc vous pouvez avoir des conditionnels, des expressions et autres. Cela vous donne un contrôle puissant sur votre style ;)