Question

我使用VueFire连接到我的数据库，其中包含食谱列表，我使用此代码加载所有食谱（相关片段）

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

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

In＆lt;模板＆GT;

<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))
    }
  }
}

我认为有更好的解决方案，您可以绑定所有数据并在UI上进行过滤。每次更改过滤器时都不需要取消绑定和重新绑定。

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

从过滤器更新Firebase查询

1 个答案: