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

Question

I'm creating a blog with free sewing patterns as content. I'm using route parameters to receive each blog individually. However, I'm getting a blank page when trying to retrieve its data from firebase firestore. Please help.

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

But it renders a blank page. I cant see my blog content.

This is my route path code. I've added a parameter of :id in my singlepattern. The SinglePattern component is where I will get the individual blog's data:

  {
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,
  },
],

},

Here is my "ListPattern" component's code. ListPattern is where all my sewing blogs are displayed.

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

And this is my 'SinglePattern' component where the clicked blog/pattern is displayed.

    <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

It works. I just had to change the code in my created() hook in 'SingePattern' component.

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