I am using two components: SceneList and SceneCard. In the SceneList component, I am randomly setting the background color of each SceneCard and trying to pass the color code to the SceneCard component. However, I am encountering an error message: "Error in directive rainbow bind hook: 'TypeError: Cannot set property 'bgcolor' of undefined'". Can anyone suggest a proper way to set data in custom directives?
Below is my code:
SceneList:
<template>
<div id="scene-list">
<scene-card
class="scene-card-comp"
v-for="scene in scenes"
:key="scene.id"
:bgcolor="bgcolor"
v-rainbow>
</scene-card>
</div>
</template>
<script>
import SceneCard from './SceneCard.vue';
export default {
props: ['scenes'],
components: {
SceneCard
},
data() {
return {
bgcolor: null
};
},
directives: {
rainbow: {
bind(el) {
const bgColor = `#${Math.random().toString().slice(2, 8)}`;
el.style.backgroundColor = bgColor;
this.bgcolor = bgColor;
el.style.opacity = '0.5';
}
}
}
};
</script>
<style lang="less">
...
</style>
SceneCard:
<template>
<div id="scene-card" @click="changeBGColor">
</div>
</template>
<script>
export default {
props: ['bgcolor'],
data() {
return {
};
},
methods: {
changeBGColor() {
console.log('bgcolor change ', this.bgcolor);
}
},
};
</script>