データの監視

算出プロパティとウォッチャ — Vue.js

watchやcomputedを使ってデータを監視するときにいろいろ大変だったのでメモ。
vueではdataやcomputedにあるデータを監視して、変更を検知して何かしらfunctionを起こしたりとかが出来る。

今回やりたいこと

props[quote]の変更を検知して、quote_controllerにPOSTしたい。
ただし、quoteの中にはquote.choicesとquote.roomがある。

元の状態

watch: {
    quote: {
      handler: function(newValue) {
        this.$http.post('//localhost:3000/quote', {
          choices: this.choices,
          room: this.room
        }).then((res) => {
          this.quote.sections = res.data
        })
      },
      deep: true
    }
}

何が問題なの？

handlerをつけると、配列の要素そのものが変更されたことを検知する。つまり、this.room = room1 => this.room = room2とか、this.choicesの要素の一つの内容だけ変わったとかも検知してくれる。deep: trueがないと、配列の要素の増減は検知してくれるけれど内容が変わったことは検知しない。

今回、roomに関しては内容の変更も検知してもらう必要がある。でないとroomに入っているのはいつも一つの要素だけだから永遠に検知されない。
でも、choicesに関してはpatternを変更すると一気に要素が入れ替わる為、その時に要素が変わったのをいちいち検知して永遠にPOSTされてしまった。
しかし、choicesとroomは同時にPOSTする必要があるので別々にwatchしてPOSTアクションを起こすことは避けたい…

解決😇？

これで一旦正常に動いているように見える。

watch: {
    choices: function(newVal, oldVal) {
      this.change = true
      console.log("heyyyyyy")
    },
    room: {
      handler: function(newVal, oldVal) {
        this.change = true
        console.log("wowowowowowo")
      },
       deep: true
    },
    change: {
      handler: function(newVal, oldVal) {
        if(this.change) {
          this.$http.post('//localhost:3000/quote', {
            choices: this.choices,
            room: this.room
          }).then((res) => {
            this.quote.sections = res.data
          })
          console.log("www")
          this.change = false
        }
      }
    }
}

まず。datachangeを置く。
roomだけdeep: trueの状態にして、choicesとroomの変更が検知されたらchange=trueとしてchange自体の変更もwatchする。