質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Vuetify.js

Vuetify.jsは、マテリアルデザインを基本とするVue.jsのCSSフレームワークです。多くのマテリアルデザインのコンポーネントを提供しており、あらゆるアプリケーションに対応可能。vue-cli用テンプレートがあり、簡単にページを作成できます。

PWA(Progressive Web Apps)

PWA(Progressive Web Apps)は、アプリのようなWebサイトを指します。仕様が異なる様々なデバイスで表示でき、インストールも不要。さらに訪問し続けることでユーザーについて学び、強力なPWAとなります。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

Q&A

解決済

1回答

3634閲覧

v1.5のVuetifyでv-btnのloading,disabledが反映されない

reud

総合スコア21

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Vuetify.js

Vuetify.jsは、マテリアルデザインを基本とするVue.jsのCSSフレームワークです。多くのマテリアルデザインのコンポーネントを提供しており、あらゆるアプリケーションに対応可能。vue-cli用テンプレートがあり、簡単にページを作成できます。

PWA(Progressive Web Apps)

PWA(Progressive Web Apps)は、アプリのようなWebサイトを指します。仕様が異なる様々なデバイスで表示でき、インストールも不要。さらに訪問し続けることでユーザーについて学び、強力なPWAとなります。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

0グッド

0クリップ

投稿2019/08/18 01:14

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にもなりませんでした。

どのような原因が考えられるでしょうか

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

this.ezRequesterSendingStates[i] = true; のように、配列にインデックスアクセスで代入していることが原因と考えられます。

注意事項 | リストレンダリング ― Vue.js

Vue.set(this.eqRequesterSendingStates, i, true) などとすることで解決すると思います。
(false を代入している箇所も同様)

投稿2019/08/18 04:38

R.Mizukami

総合スコア1086

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問