編輯:現在我知道我必須改變正文的背景顏色，但是我不知道如何根據包裝器的類在這個頁面的樣式中這樣做。該類是基于數據值設置的。

我希望整個頁面的顏色根據數據的值而改變。例如，如果hasError為true，我希望整個頁面變成紅色。我嘗試設置的寬度和高度。紅色到100vw和100vh，但這在頂部和左側留下了空白，只是稍微移動了頁面上的所有內容。這個視圖放在App.vue內的一個RouterView里面，這段代碼的問題是只有表單后面的背景色發生了變化(見截圖)，但是它需要改變整個頁面。以下是我的代碼:

<script lang="ts">
export default {
  data() {
    return {
      name: '',
      message: '',
      infoMessage: '',
      hasError: false,
    }
  },
  methods: {
    async submitForm() {
      const submitResponse = await websiteDataStore.submitContactForm({
        name: this.name,
        message: this.message,
      })
      this.infoMessage = submitResponse.message
      if (submitResponse.status === DbEditStatus.error) {
        this.hasError = true
      } 
      setTimeout(() => {
        this.infoMessage = ''
        this.hasError = false
      }, 10000)
    }
  },
}
</script>

<template>
  <div :class="{ error: hasError, success: !hasError && infoMessage }">
    <h2 v-if="infoMessage">{{ infoMessage }}</h2>
    <h1>Contact</h1>
    <form @submit.prevent="submitForm">
      <BaseInput label="Your Name" type="text" v-model="name" :value="name"/>
      <BaseInput label="Enter your message here:" type="text" v-model="message" :value="message"/>
      <button type="submit">Submit</button>
    </form>
  </div>
</template>

<style>
  .error {
    background-color: red;
  }
  .success {
    background-color: green;
  }
</style>

我意識到可以通過在if語句中編程設置body元素的背景色來解決這個問題:

const currentBackgroundColor = document.getElementsByTagName('body')[0].style.background
      this.infoMessage = submitResponse.message
      if (submitResponse.status === DbEditStatus.error) {
        document.getElementsByTagName('body')[0].style.background = 'red'
        this.hasError = true
      } else {
        document.getElementsByTagName('body')[0].style.background = 'green'
      }
      setTimeout(() => {
        this.infoMessage = '';
        this.hasError = false;
        document.getElementsByTagName('body')[0].style.background = currentBackgroundColor;
      }, 10000)