Vue.jsでのコンポーネント記述

Question

Vueで作成中の座席予約Webサイトについてご教示いただければありがたいです。
イメージとしては劇場など、座席を指定するイメージです。
コンポーネントのプロパティを親のオブジェクト値とリアクティブにさせたいです。親側の"stats"（全座席の予約状況）はAjaxで随時更新され、それに従って子コンポーメントに付与されるクラスが変わる’
できれば双方向に。子側でプロパティstatの値を変更すると、親側のオブジェクトstatsも変更されるようにしたいです。

<st id="A1"></st>
<st id="A2"></st>

var seat = {
　template: "<div class='s' :class='cssclass'></div>",
　props: ['id'],
　data: function() {
　　return { stat: 0 // この値を親の配列要素とリアクティブにしたい }
　},
　computed: {
　　cssclass: function () { return ('s' + this.stat); }
　}
};

var vm = new Vue({
　el: '#app',
　components: { 'st':seat },
　data: {
　　stats:{ },	// この値をAjaxでセット { A1:0, A2:3..}
　},
});   

Answer 1

子から親への情報の受け渡しはemitによって可能です。
ただ書かれているコードではどういったときに値を更新するか分からないので数値をインクリメントする簡単なサンプルを記載しておきます。

<div id="app">
  <template v-for="(item, index) in counter">
    <seat :index="index" :seat="item" @increment="update" />
  </template>
</div>

const seat = {
　template: '<div>{{ seat }}<button type="button" @click="increment">+</button></div>',
　props: ['index', 'seat'],
  methods: {
  	increment() {
    	this.$emit('increment', { index: this.index, val: this.seat + 1 })    	
    }
  }
};

new Vue({
  el: "#app",
  components: {
  	seat
  },
  data() {
    return {
      counter: [...Array(5).fill(0)]
    }
  },
  methods: {
    update({ index, val }) {
      this.counter[index] = val
      this.$forceUpdate() // 描画更新用
    }
  },
})

今回のような簡単な例でしたら問題ありませんが、規模が大きくなりコンポーネントがかさむとバケツリレーとなりデータの管理が辛くなります。そういった場合はVuexを導入されたほうが良いかもしれません。

Comments

[shockatz]

有意義な回答ありがとうございます。ただちょっと要件と違うというか。。
飛行機の座席指定と同じで、初期状態として全体の予約状態（statsという配列）の表示があり、そこで空いている座席（seat）をクリックすれば仮予約が入り、さらにクリックすれば仮予約が外れるというイメージです。

座席は動的に生成されるのはなく最初からそこに、自身のIDをもって存在しています。
その上で、各座席の予約状態（stat）は全体の予約状態（stats）にリアクティブに同期しなければいけません。

[nt4c]

回答した内容を応用すれば問題ない要件のように思えます。
forで書かず座席一つ一つを記載して親の値（予約状態）を子へ注入。子が変更されたときに親へ受け渡しという形でできると思いますので`emit`の動作を理解していただければと思います。