Cannot read property ‘post’ of undefined using vue.js and axios

I’m new to Vue js and I get this error

vue.js:1400 Uncaught TypeError: Cannot read property ‘post’ of undefined
at Proxy.store (D:WorkspaceWebLaravue-clientsrcviewsproductcreate.vue:86)

I followed a tutorial from someone on youtube, but that person did not get this error

 <form @submit.prevent="store()">
          <div class="mb-3">
            <label for="" class="form-label">Name</label>
            <input
              type="text"
              class="form-control"
              v-model="product.name"
            />
            <div class="text-danger">Validation Message</div>
          </div>
          <div class="mb-3">
            <label for="" class="form-label">Detail</label>
            <textarea
              class="form-control"
              id=""
              cols="10"
              rows="3"
              v-model="product.detail"
            ></textarea>
            <div class="text-danger">Validation Message</div>
          </div>
          <div class="mb-3">
            <label for="" class="form-label">Stock</label>
            <input
              type="number"
              class="form-control"
              v-model="product.stock"
            />
            <div class="text-danger">Validation Message</div>
          </div>
          <div class="mb-3">
            <label for="" class="form-label">Type</label>
            <select id="" class="form-control" v-model="product.type">
              <option value="soft">Soft</option>
              <option value="hard">Hard</option>
            </select>
            <div class="text-danger">Validation Message</div>
          </div>
          <button
            type="submit"
            class="btn btn-sm btn-outline-success shadow"
          >
            Submit
          </button>
        </form>

and this is my script using Vue js

<script>
import { reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { axios } from "axios";
export default {
  setup() {
    const product = reactive({
      name: "",
      detail: "",
      stock: "",
      type: "",
    });
const validation = ref([]);

const router = useRouter();

function store() {
  axios
    .post("http://127.0.0.1:8000/api/product", product)
    .then(() => {
      router.push({
        name: "product.index",
      });
    })
    .catch((err) => {
      console.log(err.response)
    });
}

return {
  product,
  validation,
  router,
  store,
};
      },
    };
    </script>

can someone help me to figure out this error? , btw sorry for my bad English

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

You need to remove the curly brackets around import { axios } from "axios"; so it looks like import Axios from "axios"; as with the curly brackets you are just importing the Axios object instead of the library.

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0