Django

Vueで配列の値を変更できない(´;ω;`)(Total:23day73h)

Vueで配列の値が変更できない

数時間格闘してるけど、なぜ変更できないのか分からない。

配列の値を変更したつもりが追加される…

  //公開非公開切替
  async getOpenFlagChaenge() {
    const res = await $api.yearmonth.getOpenFlagChaenge(
      this.items[0].year_month_id,
      {
        version: this.items[0].version
      })
    if (res) {
      console.log(this.items[0].open_flg)
      console.log(res.data.open_flg)
      console.log(this.items[0].open_flg[0])
      this.items[0].opne_flg = res.data.open_flg
      console.log(this.items[0])
    } else {
      console.log('error')
    }
  }

これで出力されるコンソールがこれ。

vue.runtime.esm.js?2b0e:1897 TypeError: Cannot read properties of undefined (reading 'open_flg')
    at Proxy.render (ScheduleTable.vue?984e:49)
    at VueComponent.Vue._render (vue.runtime.esm.js?2b0e:3569)
    at VueComponent.updateComponent (vue.runtime.esm.js?2b0e:4081)
    at Watcher.get (vue.runtime.esm.js?2b0e:4495)
    at new Watcher (vue.runtime.esm.js?2b0e:4484)
    at mountComponent (vue.runtime.esm.js?2b0e:4088)
    at VueComponent.Vue.$mount (vue.runtime.esm.js?2b0e:8459)
    at init (vue.runtime.esm.js?2b0e:3137)
    at createComponent (vue.runtime.esm.js?2b0e:6022)
    at createElm (vue.runtime.esm.js?2b0e:5969)
ScheduleTable.vue?3cb7:22 
[{…}, __ob__: Observer]
ScheduleTable.vue?3cb7:49 公
ScheduleTable.vue?3cb7:50 未
ScheduleTable.vue?3cb7:51 公
ScheduleTable.vue?3cb7:53 
{…}
days: (...)
dayweek: (...)
end_date: (...)
open_flg: "公"
open_flg_display: (...)
opne_flg: "未"  ※ 追加されて上にある値が変更されていない…
start_date: (...)
user_year_month: (...)
version: (...)
year_month: (...)

わらかん。なんで追加されるんだろう?

インデックス番号をOpen_flgの後に追加しても一緒でした。

ちなみにこんな感じで。

  async getOpenFlagChaenge() {
    const res = await $api.yearmonth.getOpenFlagChaenge(
      this.items[0].year_month_id,
      {
        version: this.items[0].version
      })
    if (res) {
      console.log(this.items[0].open_flg)
      console.log(res.data.open_flg)
      console.log(this.items[0].open_flg[0])
      this.items[0].opne_flg[0] = res.data.open_flg
      console.log(this.items[0])
    } else {
      console.log('error')
    }
  }

Vueの値を変更するときは、$setを使う記事を読んで変更を色々試すが、エラー地獄

  //公開非公開切替
  async getOpenFlagChaenge() {
    const res = await $api.yearmonth.getOpenFlagChaenge(
      this.items[0].year_month_id,
      {
        version: this.items[0].version
      })
    if (res) {
      console.log(this.items[0].open_flg)
      console.log(res.data.open_flg)
      console.log(this.items[0].open_flg[0])
      this.$set(this.items[0].opne_flg, [1], res.data.open_flg)
      console.log(this.items[0])
    } else {
      console.log('error')
    }
  }
困っている人
こういう感じになるから、SPAをあきらめたくなる

Qiitaで聞いてみよっと

プログラミングでひとつ躓くポイントは、自分がわからなくなった時に、気軽に聞ける相手がいないことです。
海外にも日本にも質問掲示板みたいなサービスはありますが、質問して回答がくるまで時間があったり、だれも回答してくれないこともあります。

質問したら1時間以内に回答がくるようなサービスがあったら、有料でも入ると思うなぁ…

-Django

© 2022 ごろう@縁紡ぐ