Question

我有一个Vue组件，我想扩展它以便将颜色绑定到特定的消息。我尝试了像

这样的绑定

:style="styles"

然后我收到了错误

属性或方法“样式”未在实例上定义，但在呈现期间引用。通过初始化属性，确保此属性在数据选项或基于类的组件中是被动的

或在css中制作特定的颜色类。

color--1

出现错误，如

“无法读取未定义的属性'2'

如何通过从API接收数字来动态地绑定类的颜色？

这是我的代码

<template>
    <div class="chat__message shadow" :class="{'chat__message--own': message.selfOwned, colorClass}" >

    </div>
</template>

<script>
    import moment from 'moment'
    export default {
        props: ['message'],
        data(){
            return{
                time: '',
                colorArray: ['hsl(210 , 82 , 50 )', 'hsl(130 , 50 , 51 )', 'hsl(337 , 50 , 46 )','hsl(133 , 50 , 65 )', 'hsl(28 , 50 , 70 )','hsl(180 , 50 , 59 )' , 'hsl(274 , 50 , 82 )'],
                colorClass:'',
                styles: {
                    'background-color' : this.colorArray[2]
                },
            }
        },
        created(){
            this.time = moment(this.message.created_at).format('HH:mm');
            this.setColorClass(this.message.matchPosition);
        },
        methods: {
            setColorClass(number){
                this.colorClass = "color--" + number ;
            }
        }
    }
</script>

<style lang="scss">
    .color{
            &--1{background-color: hsl(210 , 82 , 50 );}
            &--2{background-color: hsl(130 , 50 , 51 );}
            &--3{background-color: hsl(337 , 50 , 46 );}
            &--4{background-color: hsl(133 , 50 , 65 );}
            &--5{background-color: hsl(28 , 50 , 70 );}
            &--6{background-color: hsl(180 , 50 , 59 );}
            &--7{background-color: hsl(274 , 50 , 82 );}
    }
    .chat{
        &__message{

            &--own{
                background-color: hsl(201, 100%, 55%);
                color: rgba(255,255,255,1);
                text-align: right;
}}

</style>

Answer 1

试试这个，

module

Answer 2

您发布的最新内容没有引用styles的html，是另一个尝试引用此组件的styles变量的组件吗？

如何通过接收来动态地绑定类的颜色来自API的数字？

如果您将cssEl添加到组件的data对象，则可以执行以下操作：

watch: {
  // Keep track of the color (or colors) taken from the api
  colorTakenFromApi () {
    // Remove the old class if it exists;
    this.cssEl && this.cssEl.remove();
    // Create the element in the DOM, then tell the browser it's a stylesheet
    this.cssEl = document.createElement('style');
    this.cssEl.type = 'text/css';
    // Use a text template to insert the css rule you want
    this.cssEl.innerHTML = `
      .${this.cssClass} {
        background-color: `${this.colorTakenFromApi}`
      }
    `;
  }
}

我认为这有点像黑客攻击，但这是我以前在运行时更改css类的原因

Answer 3

在您的情况下，您无法在初始化数据期间访问this。

解决方法是：

将样式对象初始化为空。

data(){
    return{
        time: '',
        colorArray: ['hsl(210 , 82 , 50 )', 'hsl(130 , 50 , 51 )', 'hsl(337 , 50 , 46 )','hsl(133 , 50 , 65 )', 'hsl(28 , 50 , 70 )','hsl(180 , 50 , 59 )' , 'hsl(274 , 50 , 82 )'],
        colorClass:'',
        styles: {},
    }
},

然后在created生命周期中设置初始样式：

created() {
    this.time = moment(this.message.created_at).format('HH:mm');
    this.setColorClass(this.message.matchPosition);

    // Using Vue.set
    Vue.set(this, 'styles', {
        'background-color' : self.colorArray[2]
    });

    // OR Normal setting
    this.styles = {
        'background-color' : this.colorArray[2]
    };
},

vue-loader组件中的动态css无法正常工作

3 个答案: