In my exploration of Vue.js, I decided to create a simple project to grasp the concept of class binding. I wanted to add functionality to each button component, so that when a button is clicked, it would change its color or background color to something other than black. However, I encountered an issue where clicking on the 'black mode' button did not change the button color as intended. Instead, it altered the background color outside of the button, which was not the desired behavior. Any assistance in resolving this issue would be greatly appreciated!
Here is my Button Component:
<template>
<div>
<div class="btn1">
<button
v-on="$listeners"
:class="[dark ? 'dark' : 'light', 'baseButton']"
class="btn"
>
{{ buttonText }}
</button>
</div>
</div>
</template>
<script>
export default {
name: "DynamicButton",
props: {
buttonText: {
type: String,
default: "label",
},
dark: {
type: Boolean,
default: false,
},
light: {
type: Boolean,
default: true,
},
},
};
</script>
<style scoped>
.baseButton {
border-radius: 5px;
border: none;
padding: 10px;
width: 200px;
height: 30px;
}
.light {
background: white;
color: black;
border: 1px solid lightgray;
}
.dark {
background: black;
color: white;
}
.btn {
margin: 10px;
}
</style>
App.vue
<template>
<div id="app">
<DynamicButton
buttonText="Dark Mode"
:dark="true"
@click="handleDarkMode"
:style="{
backgroundColor: active ? 'red' : 'blue',
}"
/>
<!-- default is the light mode so we dont have to pass any pops to it-->
<DynamicButton buttonText="Light Mode" @click="handleLightMode" />
</div>
</template>
<script>
import DynamicButton from "./components/DynamicButton.vue";
export default {
name: "App",
components: {
DynamicButton,
},
props: {
darkColorChange: {
type: String,
default: "",
},
lightColorChange: {
type: String,
default: "",
},
},
data() {
return {
active: false,
};
},
methods: {
handleDarkMode() {
console.log("Dark-mode clicked");
// eslint-disable-next-line
// this.darkColorChange.style.backgroundColor = "pink";
this.active = !this.active;
},
handleLightMode() {
console.log("Light-mode clicked");
},
},
};
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>