'How to automatically import data from firebase when a user adds a listing vuejs

I have a sellcar.vue which automatically uploads on firebase and a mylistings.vue, so how do I send the data from sellcar to mylistings which is on firebase and update it every time a user adds a car in sellcar? I dont know which code to put in mylistings.vue to work. Thanks.

sellcar.vue

<template>
  <div class="about">
    <h1>Sell car</h1>
    <div class="container">
      <div class="row">
        <div class="col-sm"></div>
        <div class="col-sm">
          <p></p>
          <form @submit.prevent="addListing" class="form-inline mb-5">
            <div class="form-group">
              <label for="exampleModel1">Model</label>
              <input
                type="model"
                v-model="model"
                class="form-control"
                id="exampleInputModel1"
                placeholder="Enter model"
              />

              <p></p>
            </div>
            <div class="form-group">
              <label for="exampleInputManufacturer1">Manufacturer</label>
              <input
                v-model="Manufacturer"
                type="Manufacturer"
                class="form-control"
                id="exampleInputManufacturer1"
                placeholder="Manufacturer"
              />
            </div>
            <p></p>
            <div class="form-group">
              <label for="exampleFuel1">Fuel</label>
              <input
                type="Fuel"
                v-model="Fuel"
                class="form-control"
                id="exampleInputFuel1"
                placeholder="Enter Fuel"
              />

              <p></p>
            </div>
            <div class="form-group">
              <label for="exampleEngine size1">Engine size</label>
              <input
                type="Engine size"
                v-model="Enginesize"
                class="form-control"
                id="exampleInputEngine size1"
                placeholder="Enter Engine size"
              />

              <p></p>
            </div>
            <div class="form-group">
              <label for="exampleYear1">Year</label>
              <input
                type="Year"
                v-model="Year"
                class="form-control"
                id="exampleInputYear1"
                placeholder="Enter Year"
              />

              <p></p>
            </div>
            <div class="form-group">
              <label for="exampleModel1">Kilometrage</label>
              <input
                type="Kilometrage"
                v-model="Kilometrage"
                class="form-control"
                id="exampleInputKilometrage1"
                placeholder="Enter Kilometrage"
              />

              <p></p>
            </div>
            <div class="form-group">
              <label for="exampleRegion1">Region</label>
              <input
                type="Region"
                v-model="Region"
                class="form-control"
                id="exampleInputRegion1"
                placeholder="Enter Region"
              />

              <p></p>
            </div>
            <div class="form-group">
              <label for="exampleContact number1">Contact number</label>
              <input
                type="Contact number"
                v-model="Contactnumber"
                class="form-control"
                id="exampleInputContact number1"
                placeholder="Enter Contact number"
              />

              <p></p>
            </div>
            <div>
              <label for="exampleImage1">Image</label>
              <UploadImages
                v-model="Image"
                max="1"
                maxError="Max files exceed"
                uploadMsg="upload product images"
                fileError="images files only accepted"
              />
            </div>
            <p></p>
            <button type="button" @click="addListing()" class="btn btn-primary">
              Add
            </button>
          </form>
        </div>
        <div class="col-sm"></div>
      </div>
    </div>
  </div>
</template>
<script>
import UploadImages from "vue-upload-drop-images";
import store from "@/store";
import { db } from "@/firebase";

export default {
  name: "sellcar",
  data: function () {
    return {
      model: "",
      Manufacturer: "",
      Fuel: "",
      Enginesize: "",
      Year: "",
      Kilometrage: "",
      Region: "",
      Contactnumber: "",
      Image: "",
    };
  },
  components: {
    UploadImages,
  },

  methods: {
    addListing() {
      const model = this.model;
      const Manufacturer = this.Manufacturer;
      const Fuel = this.Fuel;
      const Enginesize = this.Enginesize;
      const Year = this.Year;
      const Kilometrage = this.Kilometrage;
      const Region = this.Region;
      const Contactnumber = this.Contactnumber;
      const Image = this.Image;
      if (
        (this.model == 0,
        this.Manufacturer == 0,
        this.Fuel == 0,
        this.Enginesize == 0,
        this.Year == 0,
        this.Kilometrage == 0,
        this.Region == 0,
        this.Contactnumber == 0)
      ) {
        alert("Please fill in all the blank spaces");
        return;
      } else {
        db.collection("listings")
          .add({
            model1: model,
            Manufacturer1: Manufacturer,
            Fuel1: Fuel,
            Enginesize1: Enginesize,
            Year1: Year,
            Kilometrage1: Kilometrage,
            Region1: Region,
            Contactnumber1: Contactnumber,
            Image1: Image,
            email: store.currentUser,
            posted_at: Date.now(),
          })

          .then((doc) => {
            alert("Succesfully added");

            this.model = "";
            this.Manufacturer = "";
            this.Fuel = "";
            this.Enginesize = "";
            this.Year = "";
            this.Kilometrage = "";
            this.Region = "";
            this.Contactnumber = "";
            this.Image = "";
          });
      }
    },
  },
};
</script>

mylistings.vue




Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source