screen_rotation
Copied to Clipboard
<html> <head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> </head> <body> <div id="app"> <h3>Vue Js Disable Button while Loading</h3> <button :disabled="isLoading" @click="getData">Get Data</button> <p v-if="isLoading">Loading...</p> <table v-if="data"> <thead> <tr> <th>ID</th> <th>First Name</th> <th>Last Name</th> <th>Email</th> <th>Avatar</th> </tr> </thead> <tbody> <tr v-for="(user, index) in data.data" :key="user.id"> <td>{{ user.id }}</td> <td>{{ user.first_name }}</td> <td>{{ user.last_name }}</td> <td>{{ user.email }}</td> <td><img :src="user.avatar" :alt="user.first_name"></td> </tr> </tbody> </table> </div> <script type="module"> const app = new Vue({ el: "#app", data() { return { isLoading: false, data: null, }; }, methods: { async getData() { this.isLoading = true; setTimeout(async () => { try { const response = await axios.get("https://reqres.in/api/users?page=2"); this.data = response.data; } catch (error) { console.error(error); } finally { this.isLoading = false; } }, 5000); }, }, }); </script> <style scoped> #app { display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 20px; } button { padding: 10px; background-color: #0077cc; color: #fff; border: none; border-radius: 5px; cursor: pointer; } button:disabled { opacity: 0.5; cursor: not-allowed; } p { margin-top: 10px; } table { width: 100%; border-collapse: collapse; margin-top: 20px; } th, td { padding: 10px; text-align: left; border: 1px solid #ddd; } th { background-color: #f2f2f2; } img { height: 50px; width: 50px; border-radius: 50%; } </style> </body> </html>