firebaseでサーバレス 第3回 〜Webからのfirestore検索とリスト表示

vue-rxとrxjsのインストール

yarn add vue-rx rxjs

htmlの編集

<table>
  <thead>
    <tr>
      <th>名前</th>
      <th>タンパク質</th>
      <th>脂質</th>
      <th>炭水化物</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="(row, index) in foods" :key="index">
      <td>{{ row["名前"] }}</td>
      <td>{{ row["タンパク質"] }}</td>
      <td>{{ row["脂質"] }}</td>
      <td>{{ row["炭水化物"] }}</td>
    </tr>
  </tbody>
</table>

typescriptの編集

import Vue from 'vue'
import Rx from 'rxjs/Rx'
import VueRx from 'vue-rx'

Vue.use(VueRx, Rx)
export default {
  name: 'FoodList',
  props: {
    msg: String
  },
  subscriptions: {
    foods: Rx.Observable.fromPromise(
      db
        .collection('foods')
        .get()
        .then(qst => qst.docs.map(doc => doc.data()))
    )
  }
}

結果

firestoreにて一行追加