Question

我有一个应用程序，其中包含Firestore作为后端...在显示所有类别的屏幕中，创建新类别时将其添加到列表中，然后在单击类别时将其ID用作一个参数，用于将路由推入该类别内，以显示存储在该类别中的帖子。

我想找到一种方法，当单击“创建新类别”按钮时立即推动路线，而不必等待将类别添加到列表中...但是我不知道该怎么做那是因为该类别的ID是随机生成的，并且不知道如何获取，所以有任何想法吗？

这是我的模板

<input v-model="newCategory" type="text" placeholder="Category name"/>
<button @click="addCategory">Create new category</button>

<div v-for="(category, index) in categories" :key="index">
  <router-link :to="{name: 'Posts', params: {categoryId: category.id}}">
    <h3>{{ category.categoryName }}</h3>
  </router-link>
</div>

和脚本：

data() {
  return {
    newCategory: null,
  };
},
methods: {
  addCategory() {
    this.$firestore.categories.add({
      categoryName: this.newCategory
    });
    this.newCategory = null;
  }
},
firestore() {
  return {
    categories: db.collection("categories")
  };
}

Answer 1

尝试在categories:[]下初始化您的data（我尚未看到它适用）

然后从this.$firestore.categories到this.categories。数据绑定应该对连接到Firestore的阵列的新推送/添加做出反应

检查addTodo方法https://github.com/vuejs/vuefire/blob/master/packages/vuefire/examples/index.html

的示例

如何路由到Vue中随机生成的Firestore ID？

1 个答案: