Vue ファイルアップロード

# 参考アドレス
https://reffect.co.jp/vue/drag-drop-file-upload/



技術要素　Vue.js
・初期表示でApp.vueが表示されます。
App.vue構成はヘッダー　メニューバー領域・ダッシュボード領域です。

・ヘッダー領域は左側にはダッシュボードの文字が　右側には・アイコン　ログインボタン
メニューバー領域は　空白です。
→　領域ごとにVue.jsで切り分けてください。コードを示してください。

上のコードを利用して以下の機能を追加してください。
ヘッダー領域にはログインボタンがあります。ログインボタンを押下します。
ログインボタンを押すと　ダイヤログが出ます。
◼︎Vuetifyを使ってダイアログは出してください。
ダッシュボードの右上部にログアウトダイアログを持ってきてください。
```javascript
App.vue:
<template>
  <v-app>
    <v-container fluid>
      <Header @login="showLoginDialog" @logout="showLogoutDialog" />
      <Dashboard v-if="isLoggedIn" @logout="showLogoutDialog" />
      <v-dialog v-model="showLogin" persistent max-width="500px">
        <LoginDialog @close="closeLoginDialog" />
      </v-dialog>
      <v-dialog v-model="showLogout" persistent max-width="500px">
        <LogoutDialog @close="closeLogoutDialog" />
      </v-dialog>
    </v-container>
  </v-app>
</template>

<script>
import Header from './components/Header.vue';
import Dashboard from './components/Dashboard.vue';
import LoginDialog from './components/LoginDialog.vue';
import LogoutDialog from './components/LogoutDialog.vue';

export default {
  components: {
    Header,
    Dashboard,
    LoginDialog,
    LogoutDialog
  },
  data() {
    return {
      isLoggedIn: false,
      showLogin: false,
      showLogout: false
    };
  },
  methods: {
    showLoginDialog() {
      this.showLogin = true;
    },
    closeLoginDialog() {
      this.showLogin = false;
    },
    showLogoutDialog() {
      this.showLogout = true;
    },
    closeLogoutDialog() {
      this.showLogout = false;
    },
    logout() {
      this.isLoggedIn = false;
      this.showLogout = false;
    }
  }
}
</script>
```
Header.vue:

```javascript
<template>
  <v-toolbar>
    <v-toolbar-title>ヘッダー</v-toolbar-title>
    <v-spacer></v-spacer>
    <v-btn icon>
      <v-icon>mdi-account-circle</v-icon>
    </v-btn>
    <v-btn @click="login">ログイン</v-btn>
  </v-toolbar>
</template>

<script>
export default {
  methods: {
    login() {
      this.$emit('login');
    }
  }
}
</script>
```

Dashboard.vue:

```javascript
<template>
  <v-container fluid>
    <v-row>
      <v-col cols="12">
        <div class="dashboard">
          <!-- ダッシュボードのコンテンツをここに追加 -->
        </div>
      </v-col>
    </v-row>
    <v-dialog v-model="showLogout" persistent max-width="500px">
      <LogoutDialog @close="closeLogoutDialog" />
    </v-dialog>
  </v-container>
</template>

<script>
export default {
  data() {
    return {
      showLogout: false
    };
  },
  methods: {
    showLogoutDialog() {
      this.showLogout = true;
    },
    closeLogoutDialog() {
      this.showLogout = false;
    }
  }
}
</script>
```
LoginDialog.vue:

```javascript
<template>
  <v-card>
    <v-card-title>
      <span class="headline">ログイン</span>
    </v-card-title>
    <v-card-text>
      <!-- ログインダイアログの内容をここに追加 -->
    </v-card-text>
    <v-card-actions>
      <v-spacer></v-spacer>
      <v-btn color="primary" text @click="close">閉じる</v-btn>
    </v-card-actions>
  </v-card>
</template>

<script>
export default {
  methods: {
    close() {
      this.$emit('close');
    }
  }
}
</script>

```
LogoutDialog.vue:

<template>
  <v-card>
    <v-card-title>
      <span class="headline">ログアウト</span>
    </v-card-title>
    <v-card-text>
      <!-- ログアウトダイアログの内容をここに追加 -->
    </v-card-text>
    <v-card-actions>
      <v-spacer></v-spacer>
      <v-btn color="primary" text @click="logout">ログアウト</v-btn>
      <v-btn color="primary" text @click="close">閉じる</v-btn>
    </v-card-actions>
  </v-card>
</template>

<script>
export default {
  methods: {
    logout() {
      this.$emit('logout');
    },
    close() {
      this.$emit('close');
    }
  }
}
</script>
```