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

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

ただいまの
回答率

90.01%

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

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 312

reud

score 18

nuxt + TypeScriptでPWAを開発しています。
その中で期待通りの動作をしないことがあったためこちらで質問させて頂きます
該当コンポーネントファイルは以下です

<template>
  <v-layout row>
    <v-flex>
      <v-card>
        <v-img
          src="https://cdn.vuetifyjs.com/images/lists/ali.png"
          height="300px"
        >
          <v-layout column fill-height>
            <v-card-title>
              <v-btn dark icon to="/">
                <v-icon>chevron_left</v-icon>
              </v-btn>

              <v-spacer></v-spacer>

              <v-btn dark icon class="mr-3">
                <v-icon>edit</v-icon>
              </v-btn>
            </v-card-title>

            <v-spacer></v-spacer>

            <v-card-title class="white--text pl-5 pt-5">
              <div class="display-1 pl-5 pt-5">
                <p>{{ deviceData.hostname }} ({{ deviceData.ipAddress }})</p>
                <div v-if="isUpdating">
                  <v-chip color="orange" text-color="white">
                    <v-avatar>
                      <v-icon>autorenew</v-icon>
                    </v-avatar>
                    Checking
                  </v-chip>
                </div>
                <div v-else>
                  <v-chip color="green" text-color="white">
                    <v-avatar>
                      <v-icon>check_circle</v-icon>
                    </v-avatar>
                    Alive
                  </v-chip>
                </div>
              </div>
            </v-card-title>
          </v-layout>
        </v-img>

        <v-list two-line>
          <v-list-tile>
            <v-list-tile-action>
              <v-icon color="indigo">important_devices</v-icon>
            </v-list-tile-action>

            <v-list-tile-content>
              <v-list-tile-title>{{ deviceData.deviceType }}</v-list-tile-title>
              <v-list-tile-sub-title>Device Type</v-list-tile-sub-title>
            </v-list-tile-content>
          </v-list-tile>

          <v-list-tile>
            <v-list-tile-action>
              <v-icon color="indigo">edit</v-icon>
            </v-list-tile-action>

            <v-list-tile-content>
              <v-list-tile-title>{{
                deviceData.description
              }}</v-list-tile-title>
              <v-list-tile-sub-title>Description</v-list-tile-sub-title>
            </v-list-tile-content>
          </v-list-tile>

          <v-divider inset></v-divider>

          <v-list-tile v-for="(r, k) in deviceData.ezRequesterModels" :key="k">
            <v-list-tile-action>
              <v-icon color="indigo">reply</v-icon>
            </v-list-tile-action>

            <v-list-tile-content>
              <v-list-tile-title>
                {{
                  `${r.protocol}://${deviceData.ipAddress}${r.parameterModel}`
                }}</v-list-tile-title
              >
              <v-list-tile-sub-title
                >EzRequester Parameter
              </v-list-tile-sub-title>
            </v-list-tile-content>

            <v-list-tile-action>
              <v-btn
                dark
                icon
                :loading="ezRequesterSendingStates[k]"
                :disabled="ezRequesterSendingStates[k]"
                @click="sendRequest(k)"
              >
                <v-icon>redo</v-icon>
              </v-btn>
            </v-list-tile-action>
          </v-list-tile>
          <v-divider inset></v-divider>
          <v-list-tile>
            <v-list-tile-action>
              <v-icon color="indigo">phone</v-icon>
            </v-list-tile-action>
            <v-list-tile-content>
              <v-list-tile-title>Send ping manually </v-list-tile-title>
              <v-list-tile-sub-title
                >Check Status Manually</v-list-tile-sub-title
              >
            </v-list-tile-content>
            <v-list-tile-action>
              <v-btn
                dark
                icon
                :loading="isUpdating"
                :disabled="isUpdating"
                @click="sendPing"
              >
                <v-icon>redo</v-icon>
              </v-btn>
            </v-list-tile-action>
          </v-list-tile>
        </v-list>
      </v-card>
    </v-flex>
  </v-layout>
</template>

<script lang="ts">
import { Vue, Component } from 'nuxt-property-decorator';
import { DeviceData } from '@/types';
import { deviceDataEmpty } from '@/mocks';
import { vxm } from '@/store';
import { Sleep } from '@/utilities';
@Component
export default class detail extends Vue {
  public ipAddr: string = 'default';
  public deviceData: DeviceData = deviceDataEmpty;
  public isUpdating: boolean = false;
  public ezRequesterSendingStates: boolean[] = [];
  public p: string = 'ou';
  created() {
    // GET parameter はcreatedで取らないとエラー
    this.ipAddr = this.$route.query.ip as string;
    this.deviceData = vxm.devices.deviceMap.get(this.ipAddr);
    for (let i = 0; i < this.deviceData.ezRequesterModels.length; ++i) {
      this.ezRequesterSendingStates.push(false);
    }
  }
  public async sendPing() {
    this.isUpdating = true;
    await Sleep(1000);
    this.isUpdating = false;
  }
  public async sendRequest(i: number) {
    this.ezRequesterSendingStates[i] = true;
    await Sleep(1000);
    this.ezRequesterSendingStates[i] = false;
  }
}
</script>

<style scoped></style>

メソッド sendPing は期待通りの動作をしていて、ボタンのクリック時にローディングアニメーションが一秒間行われますが、
sendRequest は期待通りの動作をせず、ローディングアニメーションにもならなければボタンがdisabledにもなりませんでした。

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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+1

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 90.01%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる