首先,我是设计学生,我使用vuejs为我的高级项目进行原型设计。所以这不是真正的工作项目。只是一些日记应用程序的原型。
基本上我的isuue是,我有一个列表组件来渲染我的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>
我的日期选择器组件通过EventBus向firebase.js发送日期。就像
<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中正确执行但是,当通过datepicker选择日期时,prevList不会更新。但是当dayBicker通过EventBus中的datepicker更改时,daySelected变量会更新。
如何更新prevList
?
答案 0 :(得分:1)
根据document
此功能仅执行一次。如果你想拥有 自动重新绑定(非常类似于计算属性)使用$ 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>