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

Question

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:\Workspace\Web\Laravue-client\src\views\product\create.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

Suit Boy Apps Suit Boy Apps · Accepted Answer · 2021-04-13T17:34:48

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.

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

1 Answers