strong text I'm new in laravel and vue js . I'm trying to learn Vue js .In a Laravel Vue project, i tried to use axios to post an API response. axios is not defined in Vue js 2. How to solve this problem.When i add some data. data didn't show and also didn't work my delete function. and why I face this problem ? thanks for advance

app.js

import Vue from 'vue';

import App from './vue/app';



import { library } from '@fortawesome/fontawesome-svg-core'
import { faPlusSquare, faTrash } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

library.add(faPlusSquare, faTrash)

Vue.component('font-awesome-icon', FontAwesomeIcon)


const app = new Vue ({
    el: '#app',
    components: { App }
});

addItemForm

<template>
  <div >
    <input type="text" v-model="item.name" />
    <font-awesome-icon
      icon="plus-square"
      @click="addItem()"
      :
    />
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      item: {
        name: "",
      },
    };
  },
  methods: {
    addItem() {
      if (this.item.name == "") {
        return;
      }
      axios
        .post("api/item/store", {
          item: this.item,
        })
        .then((response) => {
          if (response.status == 201) {
            this.item.name = "";
            this.$emit("reloadlist");
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
};
</script>
<style scoped>
.addItem {
  display: flex;
  justify-content: center;
  align-content: center;
}

input {
  background: rgb(236, 164, 138);
  border: 0px;
  outline: none;
  padding: 5px;
  margin-right: 10px;
  width: 100%;
}
.plus {
  font-size: 20px;
}

.active {
  color: rgb(34, 211, 57);
}

.inactive {
  color: rgb(63, 66, 63);
}
</style>

app.vue

<template>

  <div >
    <div >
      <h2 id="title">Todo List</h2>
      <add-item-form v-on:reloadlist="getList()" />
    </div>
    <list-view :items="items"
    v-on:reloadlist="getList()" />
  </div>
</template>

<script>

import addItemForm from "./addItemForm.vue";
import listView from "./listView.vue";

export default {
  components: {
    addItemForm,
    listView,
  },
  data: function () {
    return {
      items: [],
    };
  },
  methods: {
    getList() {
      axios
        .post('api/items')
        .then((response) => {
          this.items = response.data;
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
  created() {
    this.getList();
  },
};
</script>

<style scoped>
.todoListContainer {
  width: 350px;
  margin: auto;
}

.heading {
  background: wheat;
  padding: 10px;
}
#title {
  text-align: center;
}
</style>

CodePudding user response：

In order to use, axios you have to import the axios. Considering you have already installed axios already in your project as it is third party library.

import axios from 'axios';

Add above line in the component, wherever you use the package.

CodePudding user response：

First install both axios and vue-axios packages.

npm install axios vue-axios

Then in app.js file write this code:

import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios)

// this is the default base url in laravel
axios.defaults.baseURL = 'http://127.0.0.1:8000';

// this line is written to avoid csrf error
window.axios.defaults.headers.common = {
    'X-Requested-With': 'XMLHttpRequest',
    'X-CSRF-TOKEN' : document.querySelector('meta[name="csrf-token"]').getAttribute('content')
};

Then when you want to use axios just write this.axios.