Динамическое обновление ссылок Vuejs и Vuefire - PullRequest
Новая
       103

Динамическое обновление ссылок Vuejs и Vuefire

0 голосов
/ 20 мая 2018

Прежде всего, я студент-дизайнер и использую vuejs для создания прототипа моего старшего проекта.Так что это не настоящий рабочий проект.Просто прототип некоторого дневникового приложения.

По сути, моя проблема в том, что у меня есть компонент list, который отображает мой массив firebase.В Firebase ежедневные массивы вызывались с помощью ключа, который я редактировал вручную.И каждый ключ представляет день, такой как 20180519, 20180520. И есть компонент datepicker, который отправляет даты в этом формате (YYYYMMDD) в firebase.js, который является моим файлом конфигурации firebase.

Структура компонента списка похожа на: 

<template>
    <div id="list">
        <ul>
            <li v-show="current" v-for="(item, index) in list"></li>
            <li v-show="!current" v-for="(item, index) in prevList"></li>
        </ul>
    </div>
</template>

<script>
import { today, prevList } from '.././firebase';
export default {
  name: 'List',
  data() {
    return {
      current: true,
      list: [],
      prevList: [],
    }
  },
  mounted() {
    this.$root.$on('checkYesterday', data => {
        this.current = data
    });
  },
  firebase: {
    list: today,
    prevList: prevList
  },
};
</script>

Мой компонент выбора даты отправляет даты в firebase.js через EventBus.Это похоже на 

<template>
    <datepicker v-on:selected="doSelection"><datepicker>
</template>
<script>
import moment from 'moment';
import Datepicker from 'vuejs-datepicker';
import { EventBus } from '.././firebase';
export default {
  name: 'Header',
  data() {
    return {
      date: moment().format('LL'),
      openDatePicker: false,
    };
  },
  methods: {
    doSelection(val) {
      const pickerValue = moment(val).format('YYYYMMDD');
      const currentDay = moment().format('YYYYMMDD');
      EventBus.$emit('selectedDayEvent', pickerValue);
      if (pickerValue === currentDay) {
        this.$root.$emit('checkYesterday', true)
      } else {
        this.$root.$emit('checkYesterday', false)
      }
    }
  },
  components: {
    Datepicker,
  }
};
</script>

Итак, когда пользователь выбирает день, EventBus отправляет дату в firebase.js, а также создает компонент списка, для которого отображается список. 

firebase.js file is like,

import { initializeApp } from 'firebase';
import moment from 'moment';
import Vue from 'vue';
export const EventBus = new Vue({
  data: {
    daySelected: '',
  }
});

const app = initializeApp({
  apiKey: "...",
  authDomain: "...",
  databaseURL: "...",
  projectId: "...",
  storageBucket: "",
  messagingSenderId: "..."
})

const day = moment().format('YYYYMMDD');
EventBus.$on('selectedDayEvent', pickerValue => {
  this.daySelected = pickerValue;
});


export const db = app.database();
export const today = db.ref(`${day}`);
export const prevList = db.ref(`${this.daySelected}`);

В firebase.jsСегодня выполняется правильно, но prevList не обновляется, когда дата выбрана с помощью DatePicker.Но переменная daySelected обновляется при изменении дня с помощью средства выбора даты в EventBus.

Как мне обновить prevList?

1 Ответ

0 голосов
/ 20 мая 2018

Согласно документу

Эта функция будет выполнена только один раз.Если вы хотите выполнить автоматическое повторное связывание (почти как вычисляемое свойство), используйте $ watch и вызовите $ unbind, а затем $ bindAsArray

Возможно, вы захотите сохранить daySelected в качестве свойства данных: 

   <script>
    import { today, EventBus, db } from '.././firebase';
    export default {
      name: 'List',
      data() {
        return {
          current: true,
          list: [],
          prevList: [],
          daySelected: ''
        }
      },
      created() {
        this.$bindAsArray('prevList', db.ref(`${this.daySelected}`))
      },
      mounted() {
        this.$root.$on('checkYesterday', data => {
            this.current = data
        });
        EventBus.$on('selectedDayEvent', pickerValue => {
         this.daySelected = pickerValue;
        });
      },
      watch: {
        daySelected: function() {
          if (this.$firebaseRefs['prevList']) {
            this.$unbind('prevList')
          }
          this.$bindAsArray('prevList', db.ref(`${this.daySelected}`))
        }
      },
      firebase () {
        return {
          list: today    
        }
      }
    };
    </script>
...