Here is the Vue.js code I have. I want to change the background color for each page individually, but currently, I have to go to App.vue and change it there, affecting all pages because the main container that includes all pages is App.vue. Is there a way to change the background color for only one page? Thank you in advance.
<template>
<b-container>
<h1> Ask Question </h1>
<br>
<br />
<b-row align-v="center">
<b-col cols="8">
<b-form-group
@submit="postData" method="post">
<b-form-input
type="text"
name="title"
v-model="posts.title"
placeholder="Title"
required
<b-form-input id="question-input"
type="text"
name="question"
v-model="posts.question"
placeholder="Question"
required
/><br /><br />
<b-button class="primary" type="submit">Post</b-button>
</b-form-group
>
</b-col>
</b-row>
</b-container>
</template>
<script>
export default {
name: "postComponent",
data() {
return {
posts: {
title: null,
question: null,
},
};
},
methods: {
postData(e) {
this.axios.post("",this.posts).then(( result) => {
console.log(result)
})
// console.warn(this.posts)
e.preventDefault();
},
},
};
</script>
<style scoped>
@import url('https://fonts.googleapis.com/css2?family=Cairo&displa');
.container{
padding:50px;
font-family: 'Cairo', sans-serif;
}
#question-input{
padding: 35px 10px 90px;
}
</style>App.vue
<template>
<div class="app">
<Header />
<router-view />
</div>
</template>
<script>
import Header from './components/Header';
export default {
name: 'App',
components: {
Header,
},
data: () => ({
//
}),
};
</script>
<style>
.app{
width: auto;
}
</style>