Обновить запрос Firebase из фильтра

Question

Я использую VueFire для подключения к моей базе данных со списком рецептов, я загружаю все рецепты, используя этот код (соответствующие фрагменты)

firebase: {
    recipes: database.ref('recipes'),
  },

  data () {
    return {
      activeFilter: Filters.selected //returns active filter from child component for example 'pie'
    };
  },

В <шаблон>

<li v-for="(recipe, idx) in recipes" :key="idx" class="recipe">
  <a>{{ recipe.name }} - {{ recipe.type }}</a>
</li>

Теперь, если я изменю фильтр, я хочу обновить sites, чтобы вернуть только отфильтрованные элементы.В моем предыдущем коде (не Vue.js) у меня это работало:

var filteredRecipes = ref.child('recipes').orderByChild('type/pie').equalTo(true);

Но как мне использовать этот код, чтобы иметь возможность фильтрации в моем приложении Vue.js?

Answer 1

На данный момент вам нужно отменить привязку и выполнить повторную привязку:

watch: {
  'activeFilter': {
    deep: true,
    handler: function(newVal, oldVal) {
      this.$unbind('recipes')
      this.$bindAsArray('recipes', database.ref.child('recipes').orderByChild('type/' + newVal).equalTo(true))
    }
  }
}

Я думаю, что есть лучшее решение: вы связываете все данные и выполняете фильтрацию в пользовательском интерфейсе.Вам не нужно отвязывать и перепривязывать каждый раз, когда фильтр меняется.

computed: {
  filterRecipies() {
    const data = this.recipes || [
    if (this.activeFilter) {
       return data.filter(dataItem => dataItem.type.pie)
    }
    return data
  }
}