nuxt + TypeScriptでPWAを開発しています。
その中で期待通りの動作をしないことがあったためこちらで質問させて頂きます
該当コンポーネントファイルは以下です
vue
1<template> 2 <v-layout row> 3 <v-flex> 4 <v-card> 5 <v-img 6 src="https://cdn.vuetifyjs.com/images/lists/ali.png" 7 height="300px" 8 > 9 <v-layout column fill-height> 10 <v-card-title> 11 <v-btn dark icon to="/"> 12 <v-icon>chevron_left</v-icon> 13 </v-btn> 14 15 <v-spacer></v-spacer> 16 17 <v-btn dark icon class="mr-3"> 18 <v-icon>edit</v-icon> 19 </v-btn> 20 </v-card-title> 21 22 <v-spacer></v-spacer> 23 24 <v-card-title class="white--text pl-5 pt-5"> 25 <div class="display-1 pl-5 pt-5"> 26 <p>{{ deviceData.hostname }} ({{ deviceData.ipAddress }})</p> 27 <div v-if="isUpdating"> 28 <v-chip color="orange" text-color="white"> 29 <v-avatar> 30 <v-icon>autorenew</v-icon> 31 </v-avatar> 32 Checking 33 </v-chip> 34 </div> 35 <div v-else> 36 <v-chip color="green" text-color="white"> 37 <v-avatar> 38 <v-icon>check_circle</v-icon> 39 </v-avatar> 40 Alive 41 </v-chip> 42 </div> 43 </div> 44 </v-card-title> 45 </v-layout> 46 </v-img> 47 48 <v-list two-line> 49 <v-list-tile> 50 <v-list-tile-action> 51 <v-icon color="indigo">important_devices</v-icon> 52 </v-list-tile-action> 53 54 <v-list-tile-content> 55 <v-list-tile-title>{{ deviceData.deviceType }}</v-list-tile-title> 56 <v-list-tile-sub-title>Device Type</v-list-tile-sub-title> 57 </v-list-tile-content> 58 </v-list-tile> 59 60 <v-list-tile> 61 <v-list-tile-action> 62 <v-icon color="indigo">edit</v-icon> 63 </v-list-tile-action> 64 65 <v-list-tile-content> 66 <v-list-tile-title>{{ 67 deviceData.description 68 }}</v-list-tile-title> 69 <v-list-tile-sub-title>Description</v-list-tile-sub-title> 70 </v-list-tile-content> 71 </v-list-tile> 72 73 <v-divider inset></v-divider> 74 75 <v-list-tile v-for="(r, k) in deviceData.ezRequesterModels" :key="k"> 76 <v-list-tile-action> 77 <v-icon color="indigo">reply</v-icon> 78 </v-list-tile-action> 79 80 <v-list-tile-content> 81 <v-list-tile-title> 82 {{ 83 `${r.protocol}://${deviceData.ipAddress}${r.parameterModel}` 84 }}</v-list-tile-title 85 > 86 <v-list-tile-sub-title 87 >EzRequester Parameter 88 </v-list-tile-sub-title> 89 </v-list-tile-content> 90 91 <v-list-tile-action> 92 <v-btn 93 dark 94 icon 95 :loading="ezRequesterSendingStates[k]" 96 :disabled="ezRequesterSendingStates[k]" 97 @click="sendRequest(k)" 98 > 99 <v-icon>redo</v-icon> 100 </v-btn> 101 </v-list-tile-action> 102 </v-list-tile> 103 <v-divider inset></v-divider> 104 <v-list-tile> 105 <v-list-tile-action> 106 <v-icon color="indigo">phone</v-icon> 107 </v-list-tile-action> 108 <v-list-tile-content> 109 <v-list-tile-title>Send ping manually </v-list-tile-title> 110 <v-list-tile-sub-title 111 >Check Status Manually</v-list-tile-sub-title 112 > 113 </v-list-tile-content> 114 <v-list-tile-action> 115 <v-btn 116 dark 117 icon 118 :loading="isUpdating" 119 :disabled="isUpdating" 120 @click="sendPing" 121 > 122 <v-icon>redo</v-icon> 123 </v-btn> 124 </v-list-tile-action> 125 </v-list-tile> 126 </v-list> 127 </v-card> 128 </v-flex> 129 </v-layout> 130</template> 131 132<script lang="ts"> 133import { Vue, Component } from 'nuxt-property-decorator'; 134import { DeviceData } from '@/types'; 135import { deviceDataEmpty } from '@/mocks'; 136import { vxm } from '@/store'; 137import { Sleep } from '@/utilities'; 138@Component 139export default class detail extends Vue { 140 public ipAddr: string = 'default'; 141 public deviceData: DeviceData = deviceDataEmpty; 142 public isUpdating: boolean = false; 143 public ezRequesterSendingStates: boolean[] = []; 144 public p: string = 'ou'; 145 created() { 146 // GET parameter はcreatedで取らないとエラー 147 this.ipAddr = this.$route.query.ip as string; 148 this.deviceData = vxm.devices.deviceMap.get(this.ipAddr); 149 for (let i = 0; i < this.deviceData.ezRequesterModels.length; ++i) { 150 this.ezRequesterSendingStates.push(false); 151 } 152 } 153 public async sendPing() { 154 this.isUpdating = true; 155 await Sleep(1000); 156 this.isUpdating = false; 157 } 158 public async sendRequest(i: number) { 159 this.ezRequesterSendingStates[i] = true; 160 await Sleep(1000); 161 this.ezRequesterSendingStates[i] = false; 162 } 163} 164</script> 165 166<style scoped></style>
メソッド sendPing
は期待通りの動作をしていて、ボタンのクリック時にローディングアニメーションが一秒間行われますが、
sendRequest
は期待通りの動作をせず、ローディングアニメーションにもならなければボタンがdisabledにもなりませんでした。
どのような原因が考えられるでしょうか
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。