如何显示路由参数（Vue / Firebase）

Question

我正在创建一个以免费缝纫图案为内容的博客。我正在使用路由参数来单独接收每个博客。但是，当我尝试从 firebase firestore 检索其数据时，我得到了一个空白页。请帮忙。

The blog's id appears on my address bar: http://localhost:8080/#/admin/single-pattern/4LIS362IEWa7RKEv79g8

但它呈现一个空白页面。我看不到我的博客内容。

这是我的路线路径代码。我在我的单一模式中添加了一个参数 :id 。 SinglePattern 组件是我获取个人博客数据的地方：

  {
path: "/admin",
name: "admin",
component: Admin,
meta: {
  auth: true,
},
children: [
  {
    path: "dashboard",
    name: "dashboard",
    component: Dashboard,
  },
  {
    path: "manage-patterns",
    name: "manage-patterns",
    component: ManagePatterns,
  },
  {
    path: "single-pattern/:id",
    name: "single-pattern",
    component: SinglePattern,
  },
],

},

这是我的“ListPattern”组件的代码。 ListPattern 是我所有缝纫博客的展示地。

 <template>
  <div class="list-blogs">
    <h1>LIST BLOG TITLES</h1>
    <br />
    <input type="text" v-model="search" placeholder="search blogs" />
    <div
      class="blog-cover"
      v-for="pattern in filteredPatterns"
      :key="pattern.id"
    >
      <div>
        <router-link v-bind:to="'/admin/single-pattern/' + pattern.id">
          <h3 style="cursor: pointer" v-rainbow>
            {{ pattern.title | uppercase }}
          </h3></router-link
        >
      </div>
      <p
        :style="'background-color: var(--lightgrey)'"
        :inner-html.prop="pattern.description | snippet"
      ></p>
    </div>
  </div>
</template>

<script>
import firebase from "firebase";
import searchMixin from "../mixins/searchMixin";
// Basic Use - Covers most scenarios
import { VueEditor } from "vue2-editor";
import Quill from "quill";

const AlignStyle = Quill.import("attributors/style/align");
Quill.register(AlignStyle, true);

// import $ from "jquery";
import Swal from "sweetalert2";
window.Swal = Swal;
const Toast = Swal.mixin({
  toast: true,
  position: "top-end",
  showConfirmButton: false,
  timer: 3000,
});
window.Toast = Toast;
export default {
  name: "ManagePatterns",
  components: { VueEditor },
  data() {
    return {
      patterns: [],
      pattern: {
        title: null,
        description: null,
        image: null,
      },
      search: "",
    };
  },

  firestore() {
    return {
      patterns: firebase.firestore().collection("free-patterns"),
    };
  },
  computed: {}, 
  },
};
</script>

这是我的 'SinglePattern' 组件，其中显示了点击的 blog/pattern。

    <template>
  <div class="single-pattern">
    <div class="blog-cover">
      <div>
      </div>
      <div v-if="pattern">
        <h3 style="cursor: pointer">
          {{ pattern.title }}
        </h3>
        <div v-if="pattern.description">
          <p
            :style="'background-color: var(--lightgrey)'"
            :inner-html.prop="pattern.description"
          ></p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import firebase from "firebase";
import searchMixin from "../../mixins/searchMixin";
export default {
  data() {
    return {
      id: this.$route.params.id,
      patterns: [],
      pattern: {
        title: null,
        description: null,
        image: null,
      },
    };
  },
  firestore() {
    return {
      patterns: firebase.firestore().collection("free-patterns"),
    };
  },
  mixins: [searchMixin],
  created() {
    console.log(this.$route.params.id);
    var pat = this;
    firebase
      .firestore()
      .collection("free-patterns")
      .doc(this.$route.params.id)
      .get()
      .then(function(doc) {
        if (doc.exists) {
          pat.pattern = doc.data().pattern;
        } else {
          console.log("no such doc");
        }
      });
  },

  methods: {},
};
</script>

Answer 1

有效。我只需要更改 'SingePattern' 组件中 created() 挂钩中的代码。

 created() {
console.log(this.$route.params.id);
var docRef = firebase
  .firestore()
  .collection("free-patterns")
  .doc(this.$route.params.id);

docRef
  .get()
  .then((doc) => {
    if (doc.exists) {
      this.pattern = doc.data();
    } else {
      // doc.data() will be undefined in this case
      console.log("No such document!");
    }
  })
  .catch((error) => {
    console.log("Error getting document:", error);
  });

如何显示路由参数（Vue / Firebase）

How do I display a route parameter (Vue / Firebase)

firebase

vue.js

google-cloud-firestore

route-parameters

vue-router4