Django

Vueの仕組みは順次処理して表示っぽい(Total:24day75.5h)

正しく表示されているのにコンソールでエラーがでる

ずっとエラーが表示されていた。

「なんで?」

と、思って以前調べたけど解決に至りませんでした。

エラーがこちら

vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in render: "TypeError: Cannot read properties of undefined (reading 'open_flg')"

found in

---> <ScheduleTable> at src/modules/schedule/ScheduleTable.vue
       <ScheduleHeader> at src/modules/schedule/ScheduleHeader.vue
         <ScheduleYearMonth> at src/views/schedule/Schedule.vue
           <VMain>
             <VApp>
               <App> at src/App.vue
                 <Root>

調べてみると、表示と取得の処理は同時並行

もう一度、調べてみると気になったのが、エラーが出てるけど正しく表示されることです。
これは、

ごろう
表示する瞬間は、データがなく、そのあとデータが取れてから表示しているのかも

と思って、最初のdivタグにitmeが何もない時は処理をしないように、v-ifを追加します。

<template>
  <div v-if="items[0]"> ←これを追加
    <v-btn
      class="ma-2"
      color="orange darken-2"
      dark
      @click="getLastMonth(items[0].start_date)"
    >
      <v-icon dark left>mdi-arrow-left</v-icon>
      前月
    </v-btn>
    <v-btn
      class="ma-2"
      color="primary darken-2"
      dark
      @click="getOpenFlagChaenge(items[0].year_month_id, items[0].open_flg)"
    >
      <p v-show="items[0].open_flg==='公'">
        非公開
      </p>
      <p v-show="items[0].open_flg==='未'">
        公開
      </p>
    </v-btn>
    <!-- 翌月のデータがなければ翌月ボタン非表示 -->
    <span v-if="nextmonth.length !==0">
      <v-btn
        class="ma-2"
        color="orange darken-2"
        dark
        @click="getNextMonth(items[0].start_date)"
      >
        <v-icon dark left>mdi-arrow-right</v-icon>
        翌月
      </v-btn>
    </span>
    <!-- 翌月のデータがなければ翌月シフト作成ボタンを表示する -->
    <span v-else>
        <v-btn class="ma-2" color="primary darken-2" dark>翌月シフト作成</v-btn>
    </span>
    <v-simple-table>
      <thead>
        <tr>
          <!-- 日付の期間を表示 -->
          <th>{{ items[0].start_date + '~' + items[0].end_date }}</th>
          <!-- 取得した日付曜日リストを取り出し表示する -->
          <template v-for="item in items">
            <th v-for="dayweek in item.dayweek" :key="dayweek.index">
              <div v-if="dayweek.day_week_display === '土'">
                <span class="sat">
                  {{ dayweek.day }}
                  <br />
                  {{ dayweek.day_week_display }}
                </span>
              </div>
              <div v-else-if="dayweek.day_week_display === '日'">
                <span class="sun">
                  {{ dayweek.day }}
                  <br />
                  {{ dayweek.day_week_display }}
                </span>
              </div>
              <div v-else>
                <span>
                  {{ dayweek.day }}
                  <br />
                  {{ dayweek.day_week_display }}
                </span>
              </div>
            </th>
          </template>
        </tr>
      </thead>
      <tbody v-for="(item, key, index) in items" :key="index">
        <!-- 社員ごとのスケジュールを処理 -->
        <tr v-for="(useryear, index) in item.user_year_month" :key="index">
          <td>
            <p>
              {{ useryear.user.get_full_name + ' 労' +
              useryear.total_work_time + ' 有' +
              useryear.paid_break_time }}
            </p>
          </td>
          <td v-for="(schedule, index) in useryear.schedule" :key="index">
            <div v-bind:class="schedule.shisetsu1.color">
              {{ schedule.shift1.name }}
            </div>
            <div v-if="schedule.shift2 !== null">
              <div v-bind:class="schedule.shisetsu1.color">
                {{ schedule.shift2.name }}
              </div>
            </div>
            <div v-if="schedule.shift3 !== null">
              <div v-bind:class="schedule.shisetsu1.color">
                {{ schedule.shift3.name }}
              </div>
            </div>
          </td>
        </tr>
      </tbody>
    </v-simple-table>
  </div>
</template>

これでエラーがなくなりました!

よくあるエラーっぽいのに、ネット上には情報がほとんどない…

javascriptではよくあるエラーっぽいのですが、検索してもすぐに問題解決に至る記事が見つけることができなかった。
これは、当たり前すぎて誰も記事にしていないのか、キーワードがないのか…

結局、エラーはそんなの存在しないよってエラーが表示されてるから、それについての記事ばっかりだった。

やっぱり質問してすぐに回答が得られるようなコミュニティが欲しい

こういったわからないことがあった時に、どこでどうやって発信すれば情報が手に入れられるのだろうか…

最近こればっかり思う…

プログラミング言語ってたくさんあるし、フレームワークもたくさんある。
大げさだけど、日本全体で推奨言語決めてそればっかり使ったら、みんなたくさん聞く相手ができて、開発スピードも一気にあがると思う。

チョイスを間違えると世界からおいてかれるけど

-Django

© 2022 ごろう@縁紡ぐ